[英]Expand div with "display: table-cell" on click?
我的頁面上有一系列組件:
150px
高。150px
高,我想將它們的文本垂直居中。150px
我想在150px
處切斷文本,並在需要時使用顯示更多按鈕展開它。 現在,第一種情況,它們不是150px
高,效果很好,文本居中。 問題是我無法讓height > 150px
組件切斷它們的內容。
我試圖在沒有 jQuery 的情況下做到這一點。
HTML:
<div class="containerDiv">
<div id="content1" class="contentDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br />
<button class="showMoreButton" onclick="showMore()">Show More</button>
</div>
</div>
<br />
<div class="containerDiv">
<div id="content2" class="contentDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br />
<button class="showMoreButton" onclick="showMore()">Show More</button>
</div>
<br />
</div>
CSS:
.containerDiv {
display: table;
min-height: 150px;
width: 400px;
}
.contentDiv {
display: table-cell;
max-height: 150px;
overflow: hidden;
vertical-align: middle;
}
.showMoreButton {
display: none;
}
JS:
var contentDivs = document.getElementsByClassName("contentDiv");
for(var i = 0; i < contentDivs.length; i++) {
if(contentDivs[i].offsetHeight > 150) {
contentDivs[i].getElementsByTagName("button")[0].style.display = "inline-block";
}
}
function showMore() {
console.log(event.path[1].id);
document.getElementById(event.path[1].id).style.maxHeight = "none";
}
好的,我發現您無法為顯示為表格單元格的元素設置最大高度
因此,我將文本包裹在div
,在那里設置所有max-height
和overflow
屬性,效果很好。
HTML:
<div class="containerDiv">
<div id="content1" class="contentDiv">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<button class="showMoreButton" onclick="showMore()">Show More</button>
</div>
<br />
</div>
</div>
<br />
<div class="containerDiv">
<div id="content2" class="contentDiv">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br />
<button class="showMoreButton" onclick="showMore()">Show More</button>
</div>
<br />
</div>
CSS:
.containerDiv {
display: table;
min-height: 150px;
overflow: hidden;
width: 400px;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
}
.content {
max-height: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.showMoreButton {
display: none;
}
JS:
var contentDivs = document.getElementsByClassName("contentDiv");
for(var i = 0; i < contentDivs.length; i++) {
if(contentDivs[i].offsetHeight > 150) {
contentDivs[i].getElementsByTagName("button")[0].style.display = "inline-block";
}
}
function showMore() {
document.getElementById(event.path[1].id).getElementsByClassName("content")[0].style.maxHeight = "none";
}
試試 css 風格的word-wrap:ellipsis
。 它會工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.