css 多余省略号_css3 新属性 textoverflow 实现截取多余文字内容 以省略号来代替多余内容...

点击上方蓝字关注我们

我们在设计网站的时候有时会遇到这样一个需求：因为页面空间大小的问题，需要将多余的文字隐藏起来，并以省略号代替，类似这样的效果：

做到这样的效果，我们不仅需要运用到css3的新属性text-overflow，该属性的作用就是设置一下被隐藏文本的展示形式(例如隐藏文本用……展示)，除此之外还需要用到属性white-space使文字不换行，以及使用属性overflow:hidden隐藏多余的文字

接下来我们就来分步讲解一下这几个属性的应用吧

1

让我们分别来看一下使用了这些样式，和不使用这些样式的区别吧

• html内容

<div class="box">    <span>我是一段测试文本1我是一段测试文本2我是一段测试文本3我是一段测试文本4我是一段测试文本5我是一段测试文本5span>div>

• css内容

.box{    background: red;    width: 100px;}

• 效果展示

我们可以看到，文本根据边框的宽度，自动换行，并且全部显示

2

此时我们使用一下white-space:nowrap，看看效果是什么样的

• css内容

.box{    background: red;    width: 100px;    white-space: nowrap;             /*使文本内容不换行，写在一行*/}

• 效果展示

可以看到，原本多行的文本现在被放到了一行内，并且文本超出了标签的宽度

3

此时，我们再在上面的基础上加上overflow:hidden，看看效果是什么样的

• css内容

.box{    background: red;    width: 100px;    white-space: nowrap;             /*使文本内容不换行，写在一行*/    overflow: hidden;                /*隐藏多余内容*/}

• 效果展示

  

我可以看到，原本超出标签大小的部分文本已经被隐藏了

4

最后我们再使用关键的一个属性text-overflow:ellipsis，我们来看看效果

• css内容

.box{    background: red;    width: 100px;    white-space: nowrap;             /*使文本内容不换行，写在一行*/    overflow: hidden;                /*隐藏多余内容*/    text-overflow: ellipsis;         /*将多余内容以省略号的方式展示*/}

• 效果图

到这一步，就成功地实现了我们想要的效果了，是不是非常的简单呢？

关注我，不迷路~

我是Lpyexplore，带你在python爬虫的过程中学习前端

好看的人都会点 在看