我有一个div和一个img里面的div。跨度和图像都假定是垂直对齐的。
<div class="container">
<img src="test.png">
<span class="inner">this line can be 2-3 line with ellipsis</span>
</div>
.container {
height: 72px;
width: 250px;
}
.test {
height: 64px;
width:64px;
}
img必须在其左侧,文本在其右侧。无法使其正常工作!
到vertical-align
由侧元件2侧,需要对它们进行显示具有一个内联boxe。
或者他们需要充当table-cell
Flexbox的子代,或者是Flexbox的子代。
Img不会接受,display-table-cell;
并且display:flex
可能会很棘手img
,让我们使用inline-block
。
为省略号,white-space
,text-overflow
和overflow
将被一起使用。在这里inline-block
,我们还需要给一个width
。
.container {
height: 72px;
width: 250px;
text-align: center;
}
img {
vertical-align: middle;
}
.test {
height: 64px;
width: 64px;
}
.inner {
width: 180px;
display: inline-block;
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
<div class="container">
<img src="http://dummyimage.com/64x64&text=test.png">
<span class="inner">this line can be 2-3 line with ellipsis</span>
</div>
<div class="container">
<img src="http://dummyimage.com/64x64&text=test.png">
<span class="inner">this line can be 2-3 line with ellipsis
this line can be 2nd line with ellipsis</span>
</div>
<div class="container">
<img src="http://dummyimage.com/64x64&text=test.png">
<span class="inner">this line can be 2-3 line with ellipsis
this line can be 2nd line with ellipsis
this line can be the third line with ellipsis</span>
</div>
要在几行上激活省略号,您需要使用white-space:pre;
或<pre>
标记并在HTML代码中进行换行。text-overflow:ellipsis;
通常用在单行上,在换行文本中不可用,仅在底部显示一个框。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句