文字超出隐藏并显示省略号

最新推荐文章于 2024-10-02 09:25:25 发布

qq_24845663

最新推荐文章于 2024-10-02 09:25:25 发布

阅读量577

点赞数

本文介绍了一种使用CSS样式来处理文本溢出的方法，通过设置宽度、溢出属性、文本隐藏和省略号显示，实现文本的优雅截断。包括具体代码示例，帮助开发者在网页布局中更好地控制文本展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法

一是用程序开截取字符长度，这个其实也是可以的

第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，

css样式如下：

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

html代码如下：

<div
class="css1">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
<div
class="css2">Web前端开发 - 专注于网站前端设计与Web用户体验</div>

<st这yle type=”text/css”>
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/
color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<p>