Gib*_*boK 6 html css html5 css3
我需要剪切一个文本,在末尾添加树点"......"三个点应该只出现在文本的第二行.这个jsfiddler显示了一行的示例,但在添加点之前我无法显示两行文本.知道怎么解决吗?
http://jsfiddle.net/hT3YA/263/
#test {
background:#eee;
border:1px dotted #ccc;
margin:1em;
padding:5px;
width:100px;
height:200px;
}
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:200px; }
<div id="test" class="crop">
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
</div>
Run Code Online (Sandbox Code Playgroud)
这里的解决方案仅适用于 webkit,感谢您的评论。
http://jsfiddle.net/hT3YA/268/
#test {
background:#eee;
border:1px dotted #ccc;
margin:1em;
/*padding:5px; */
/*width:100px;*/
}
.crop {
display: -webkit-box;
width: 200px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="test" class="crop">
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
</div>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4807 次 |
| 最近记录: |