css不显示省略号

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中提供了一个文本溢出(text-overflow)属性,用于控制文本内容超出容器宽度时如何显示。其中,text-overflow可以设置三个值:clip、ellipsis和string。通常我们

CSS中提供了一个文本溢出(text-overflow)属性,用于控制文本内容超出容器宽度时如何显示。其中,text-overflow可以设置三个值:clip、ellipsis和string。通常我们使用的是ellipse(省略号)。

但是有时候,在使用ellipsis时却发现并没有出现省略号,或者只出现了一部分省略号。这是因为出现了以下几个情况:

1. 省略号位置不正确,需调整padding或margin值;
2. 该元素没有设置宽度,需设置宽度值;
3. 该元素是行内元素,需设置display: block或inline-block;
4. 该元素有浮动,需清除浮动(clearfix);
5. 该元素的white-space属性值可能为nowrap或pre(需改为normal);
6. 该元素的overflow属性值可能为visible(需改为hidden或auto)。

通过以上几种方式的解决,就能够让省略号正常地显示了。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css不显示省略号

粉丝

0

关注

0

收藏

0

已有0次打赏