flex 布局下，css 设置文本不换行时，省略号不显示的解决办法

大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。

<div class="main">

    <img alt="" class="logo" src="pic.jpg">

    <div class="content">

        <h4 class="name">a name</h4>

        <p class="info">a info</p>

        <p class="notice">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

.notice 会非常长，一些设备下需要隐藏显示，即不换行，并留下省略符 ... 作标记。

.main {

    display: flex;

}

.logo {

    width: 100px;

    height: 100px;

    margin: 10px;

}

.content {

    flex: 1;

}

.content > * {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

这里会发现 text-overflow: ellipsis 不生效，省略符根本没有出现。

尝试取消父元素 .content 的 flex: 1 ，无效。

尝试取消 .main 容器的 display: flex ，省略号出现。

因此猜测是 flex 布局的问题，进一步猜测省略符需要对父元素限定宽度。

尝试对父元素 .content 设置 width: 100% 无效，设置 width: 0 可行。即：

.content {

    flex: 1;

    width: 0;

}

更新：

如果不设置宽度， .content 可以被子节点无限撑开；因此 .notice 总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果。

测试还有一种方法可以达到效果：

给 .content 设置 overflow: hidden ；

以下方法无效：

给 html, body 设置 max-width ，元素似乎能强行撑开页宽；
给 body 设置 overflow ，页宽不能被撑开了，但元素宽度还在，即元素本身还是溢出；
给 html, body 同时设置 max-width 和 overflow ，页宽限定在 max-width 内，元素本身还是溢出；
给 .main 容器设置 overflow: hidden ，同理 .main 是不溢出了， .notice 本身还是溢出；
给 .notice 元素设置 width或max-width ，虽然宽度受限，但在特定宽度下省略符 ... 显示不全，有时只显示两个点 .. 。

以上仅在 chrome 58.0.3029.81 下测试，系统为 Ubuntu 16.04.2 LTS 。

本文基于知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议发布，欢迎引用、转载或演绎，但是必须保留本文的署名BlackStorm以及本文链接http://www.cnblogs.com/BlackStorm/p/6793170.html，且未经许可不能用于商业目的。如有疑问或授权协商请与我联系。

巴特西

flex 布局下，css 设置文本不换行时，省略号不显示的解决办法

最新文章

热门文章