<style type="text/css">
ul,li{ list-style: none}
ul{ display: flex; width: 500px;}
li{ flex:1; width: 0;}
span{width: 100%; display: block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
</style>
<ul>
<li><span>测试测试测试测试测试测试</span></li>
<li><span>012345678901234567890123456789</span></li>
<li><span>测试测试测试测试测试测试</span></li>
<li><span>012345678901234567890123456789</span></li>
<li><span>测试测试测试测试测试测试</span></li>
</ul>
效果展示
image.png
效果展示
居中 Flex 文本溢出显示省略号 不被挤 文字换行
场景描述 商城购物车元素左右布局的内容商品描述，使用多级flex布局时，文字溢出以省略号代替会出现失效的情况 解决...
溢出且没有省略，容易出现在嵌套flex布局中 在最父级的flex: n元素中加入以下代码修复
问题描述 当我使用 flex 布局做两栏布局的时候，左侧宽度固定，右侧宽度使用 flex: 1，文字溢出，如图 ...
横向布局 横向布局 自动换行 Flex 布局教程：语法篇 文本自动换行 文字超出用省略号显示 wx.switchT...
弹性布局flex: 文字超出宽度后，显示省略号的解决办法 overflow:hidden; white-space...
一、单行文字溢出省略效果 正常300px宽度的段落 文字溢出隐藏效果 关键CSS 测试代码： 二、多行文字溢出省略...
flex布局使用在overflow: auto容器内时，溢出部分被修剪的解决办法？ flex-wrap:
文字溢出省略号 文字单行溢出: 多行文字溢出: 渐变 边框渐变: border有个border-image的属性，...
本文标题：flex布局文字溢出省略
本文链接：https://www.haomeiwen.com/subject/asrtpxtx.html
网友评论