首页 > 代码库 > css怎样让HTML中超出的内容显示为省略号

css怎样让HTML中超出的内容显示为省略号

2024-08-18 05:12:33   216人阅读

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
第一种、用程序开截取字符长度，这个其实也是可以的。
第二种就是接下来分享的内容，用css样式来做,话也不多说，直接上代码吧：
HTML：
<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验</div>

css：

.css1{
     color:#6699ff;
     border:1px solid #ff8000;
     margin-bottom:20px;
     width: 20em;/*不允许出现半汉字截断*/
 }
 .css2{
     overflow: hidden; /*自动隐藏文字*/
     text-overflow: ellipsis;/*文字隐藏后添加省略号*/
     white-space: nowrap;/*强制不换行*/
     width: 10em;/*不允许出现半汉字截断*/
     color:#6699ff;
     border:1px solid red;
 }

OK！谢谢阅读！！！

css怎样让HTML中超出的内容显示为省略号


联系
我们