如何让超出块级元素的内容使用省略号代替?

潇洒哥和黑大帅

发布于 2018-10-23 16:20:30

1.5K0

发布于 2018-10-23 16:20:30

文章被收录于专栏：WebDeveloperWebDeveloper

先看上面两幅图片,如果实现上面现象该如何

.main{
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="main">
    1111111111111111111111111111111111111111
</div>

必须overflow:hidden;和text-overflow:ellipsis组合才可以实现上述效果

难道这就完成了吗？那当然不是。如果我们内容有很多的话，但是我们只想在一行显示出来，并且多余的用省略号代替，可问题就是如果内容出现空格或连字符的话会自动换行那怎么办？先看看问题现象

.main{
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="main">
    111111111111111111 1111111111111111111111
</div>

现在解决如果在一行显示,现在问题的出现就是她会自动换行，所以我们可以阻止默认换行,认识一个属性

值	解释
ormal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

我们使用white-space: nowrap,下来让我们再试试

```css
.main{
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2016-06-17_024044.png

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016.06.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度