纯CSS实现：文字过长超出部分以...显示，以及解决text-overflow: ellipsis;不生效的问题

最新推荐文章于 2024-03-14 00:27:29 发布

BIG l BOSS

最新推荐文章于 2024-03-14 00:27:29 发布

阅读量4.4k

点赞数 2

分类专栏： CSS 文章标签： CSS table text-overflow ellipsis overflow

本文链接：https://blog.csdn.net/u013155797/article/details/88115731

版权

1 篇文章 0 订阅

订阅专栏

在项目中，我们经常会遇到与后台进行数据交互时，获取到的数据超出自己预留空间范围。

一般的处理方式是将超出部分以...的形式展示。

这就使用到了CSS中的 text-overflow 属性，这个属性有3个属性值：

我们要使用的就是 text-overflow: ellipsis;

按照text-overflow: ellipsis;使用规则，在标签样式中添加该属性，例如：

.text {
    text-overflow: ellipsis;
}

<div class="text">长文字长文字长文字长文字长文字长文字长文字长文字长文长文字长文字长文字长文字长文字长文字</div>

但是当文字超出我们既定范围后发现并没有达到我们想要的预期效果。

其实还需要另外2个CSS属性的支持：

.text {
    text-overflow: ellipsis;
    white-space: nowrap; 
    overflow: hidden;
}

其中，white-space 是设置文本不换行，overflow 设置标签超出部分自动隐藏，另外提醒，该CSS属性在某些浏览器上不生效，如果不需要照顾不兼容的浏览器，比如IE，可以放心大胆使用。

也许有的同学会发现在弄一些table的时候遇到了td内的内容太多而出现换行从而影响整体的美观的问题，所以我想把文本不换行而且让超出的文本能显示为省略号，于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度，结果神了奇，一直没把超出的文本内容给换成省略号。

没错！想要将table中的文字超出部分转换成...的形式，需要在table的样式里定义一个属性 table-layout: fixed;

综上，要想解决表格里面使用text-overflow后依旧不能隐藏超出的文本的问题，就必须完整的使用下面这些属性：

d{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
} 
table{
    table-layout: fixed;
}

如果想鼠标移动上去时显示被隐藏的文本内容，还可以设置：

td:hover 
{ 
    text-overflow: inherit;
    overflow: visible;
}

普通文本显示效果同理。

关注