html如何让超出的内容显示为省略号？

Posted 2023-03-21

参考技术A

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，两种方法可以实现：一是用程序开截取字符长度，二是用样式来做。

css样式如下：
[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;

[/css]

html代码如下：
[html]
<div class="css1">Web前端开发 _ 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 _ 专注于网站前端设计与Web用户体验</div>
[/html]
<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>

如何让多文本内容只显示一行，其余用省略号来显示

在此需要用到三个属性配合使用：

overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分省略号显示*/

实例：
<p>

兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦
　　既然不是毛毛虫 就要壮烈的扑火 短暂青春要像 烟火

</p>

css代码：
<style>

*{
    margin: 0;
    padding: 0;
}

p{
    width: 100px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

效果如下：

 

</style>