css3实现文本裁剪
text-overflow:clip ellipsis string
clip 裁剪多余文字
ellipsis 以省略号表示裁剪文字
string 以指定字符串表示裁剪文字(非所有浏览器都支持,firefox支持)
使用的大前提,要先设置下面这两个地方,分别是:
/* 1.要先设置 不自动换行 */
white-space: nowrap;
/* 2.超出之后,要隐藏 */
overflow: hidden;
然后,再设置 当文本溢出之后,你要怎么办?
text-overflow: clip; 裁剪
text-overflow: ellipsis; 自动把多出的内容,显示为... 点点点(省略号)
把最后一个文本,换成3个省略号
text-overflow: "未完待续"; 你自己指定一个字符串,表示后面还有东西。
注意:这种写法,只有firefox浏览器支持
<div class="box">
中方决定对在涉华问题上严重侵犯中国主权、负有主要责任的28名人员实施制裁,包括特朗普政府中的蓬佩奥、纳瓦罗、奥布莱恩、史达伟、波廷杰、阿扎、克拉奇、克拉夫特以及博尔顿、班农等。这些人及其家属被禁止入境中国内地和香港、澳门,他们及其关联企业、机构也已被限制与中国打交道、做生意。
</div>
css:
.box{ width: 300px; height: 300px; margin: 20px auto 10px; border:1px solid red; }
代码演示:
可以看到文本会自动换行,当我们不想内容全部显示出来时:
css:
.box {
width: 300px;
height: 300px;
margin: 20px auto 10px;
border: 1px solid red;
/* 1、先设置不自动换行 */
white-space: nowrap;
/* 2、超出之后隐藏 */
overflow: hidden;
/* 文本裁剪 */
text-overflow: elip;
/* ellipsis 把最后一个文本换成三个点 */
text-overflow: ellipsis;
/* 指定文本内容,表示后面还有内容(仅火狐浏览器支持) */
/* text-overflow: "more"; */
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果