您现在的位置是:首页 > 学习笔记

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

刘锁2018-10-04人围观
简介在做项目的时候,一行需要显示几个固定宽度的div,结果遇到div内容超过长度,显示换行问题,理想的界面是当内容超过div宽度时,后面自动显示为省略号,为了易用性考虑,鼠标放上去,要全部浮现显示内容,具体如下:
样式未处理前,div内容超过长度后,换行显示:
css控制文本内容超过长度显示省略号

处理方法,在宽度固定的情况下,增加样式overflow: hidden;text-overflow:ellipsis;white-space: nowrap;,例子如下:
<!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">css控制文本内容超过长度显示省略号</div>
</body>
</html>        
效果如下:
css控制文本内容超过长度显示省略号

打赏本站,你说多少就多少

文章评论

    共有条评论

    用户名:

    验证码:

本栏推荐

点击排行

  • mysql 数据库添加远程访问用户

    mysql 数据库添加远程访问用户只要mysql服务器能够连接互联网,执行后,就可以通过外网地址方式连接mysql...

  • div水平垂直居中的几种方法

    div水平垂直居中的几种方法设置元素水平垂直居中,这种问题在面试中基本都会被问到,通常情况下分为2种情况,已知元素的宽度...

  • 修改placeholder的默认颜色样式

    修改placeholder的默认颜色样式在html5中,placeholder的默认颜色是#A9A9A9,有时候我们需要改变它的默认颜色,我们只需修改一下...

  • js获取url参数

    js获取url参数以前做的一个项目,通过js跳转到新页面,新页面利用js获取url中参数,用来判断用户进入是否正确,下...

  • 安静地做着设计

    安静地做着设计自从入了这行,很多人跟我说可以做网络教程,我也有考虑,但最终没有实现,因为我觉得在这个教程泛滥...

  • 如何在网站上添加百度地图?

    如何在网站上添加百度地图?很多企业官网都有一个联系我们页面,上面显示了一些企业的联系方式、地址以及百度地图定位红点...

关注微信

    微信关注