什么css样式能自动截取一定长度的字符串,后面用...表示,最重要是兼容所有浏览器,不能用js,谢谢

html-css013

什么css样式能自动截取一定长度的字符串,后面用...表示,最重要是兼容所有浏览器,不能用js,谢谢,第1张

如果是在table标签中

table 设置 style=”table-layout: fixed”

并且在 td标签中使用

style= “white-space:nowrapoverflow:hiddentext-overflow: ellipsis”

其他标签

你试试 加入样式

width:150pxwhite-space:nowraptext-overflow:ellipsisoverflow: hidden

css截取多行文字可以使用容器的超出隐藏来实现,注意:多行无法截取后面不会出现省略号;

1、因为要对其设定宽高,所以设置容器为block或者inline-block;

2、设置overflow:hidden让超出内容的部分不显示;

3、为了避免长单词,长的数字不换行,还需要对该容器设置:word-break:break-allword-wrap:break-word

这样就可以实现了文字的截取效果;

具体代码如下:

<style>

.wordwrap{width:100pxheight:36pxline-height:18pxfont:400 12px/1.5 Simsunoverflow:hiddenword-break:break-allword-wrap:break-word}

</style>

<div class="wordwrap">

    <span>文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取</span>

</div>