您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

css控制文本内容超过长度显示省略号

刘锁2018-12-13【CSS3|Html5】人已围观

简介今天写了一个页面,表格数据通过后台动态读取,结果内容太长折行显示,使得页面显示不友好,我当然不能听之任之,于是,通过css控制,当内容超过设定宽度后自动显示为省略号,为了易用性考虑,给表格加了title属性,这样鼠标放上去,内容就全部浮现显示,下面用div做了一个例子,如下:

未处理前,当div内容超过长度后,换行显示:
文本内容过长显示省略号

处理方法:
1.固定div宽度;
2.增加样式overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
3.建议给div增加title,用来浮显显示。

代码如下:
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>css控制文本内容超过长度显示省略号</title>
    <style type="text/css">
        .system1{
            width:80px;/*必须给定固定宽度*/
            overflow: hidden;/*表示超过宽度的内容会被修剪*/
            text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
            white-space: nowrap;/*文本内容不换行显示*/
        }
    </style>
</head>
<body>
    <div class="system1" title="css控制文本内容超过长度显示省略号">css控制文本内容超过长度显示省略号</div>
</body>
</html>

运行后,效果如下,如果需要看到全部文字,只需要把鼠标放在文字上面即可:

Tags:css

很赞哦! ()

文章评论

站点信息