在行号N上截断文本CSS
答
设置line-height
,并且max-height
多重的n行你想展示。例如,如果line-height
是30像素,仅显示2行:
HTML
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
CSS
.text {
line-height: 30px;
max-height: 60px;
overflow: hidden;
}
+0
太简单了!打的好!解决问题!谢谢 – jdawg
答
是的,它很简单,看下面的例子。
HTML:
<div class="i-speak-too-much">
Hello I like speak, I live in the future I am the Universe
</div>
CSS:
.i-speak-too-much {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; //making dots
}
的jsfiddle:https://jsfiddle.net/ot9excbr/
+0
是的,这适用于1行,但想象如果你的文本是7行,你想显示3 .. 文本溢出:省略号打破第一行,是否有可能将其改为第n行? – jdawg
检查此[博客] (http://hackingui.com/front-end/a-pure-c ss解决方案为多行文本截断/)和[codepen示例](https://codepen.io/martinwolf/pen/qlFdp) – Venugopal
好贴@Venugopal,似乎正是我一直在寻找! – jdawg