用css如何截取多行文字

html-css09

用css如何截取多行文字,第1张

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>

你好,看了 你的问题,单纯用css现在貌似解决不了,css只能实现溢出隐藏,用...来表示。

你需要隐藏中间部分内容,需要用到js啊。可以用js先算出字符串的长度,然后截取收尾两段显示,中间加...即可。