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

时间：2022-04-17 06:23:54

大致是有一个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总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果。

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

  1. 给.content设置overflow: hidden；

以下方法无效：

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

以上仅在chrome 58.0.3029.81下测试，OS Ubuntu 16.04.2 LTS。




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

标签：

相关文章