如何实现flex布局下div等宽且内部文字可以溢出显示
2018-03-01 10:48
531 查看
效果如图:
HTML结构:
<div class="labels"> <div class="label"><span>1</span></div> <div class="label"><span>2</span></div> <div class="label"><span>3</span></div> <div class="label"><span>4</span></div> <div class="label"><span>Today</span></div> <div class="label"><span>6</span></div> <div class="label"><span>7</span></div> <div class="label"><span>8</span></div> <div class="label"><span>9</span></div> <div class="label"><span>10</span></div> </div>
CSS样式:
.labels { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; .label { -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; span { overflow: visible; position: absolute; line-height: 0; } } }
相关文章推荐
- 老大要求把Word文档加上公司的标识,公司名文字或者logo图片都可以,但要求是用电脑打开(电子文档时)能看见标识,如果打印出来(纸质文档)就不显示出来,如何实现?
- 实现div内部文字,一旦超出div的范围,就不显示,并且超出的用"..."显示
- 不用flex布局实现并排的div等宽等高布局
- jQuery实现 div里面的文字如何自动缩小,避免文字溢出
- 用DIV+CSS布局中,如何设置图片与文字在同一高度?
- Flex中如何创建可以显示multi-line并且高度可变的DataGrid控件的例子
- css如何控制文字多行显示,溢出截断后末尾出现省略...
- c#动态设置combobox控件下拉项宽度以实现下拉项文字可以完全显示。
- (源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字
- Android 如何实现竖排文字显示?
- 在Android中,可以自定义类,继承ViewGroup等容器类,以实现自己需要的布局显示。
- flex的Canvas可以和HTML的DIV一样做块状的网格布局
- 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号
- .net下如何实现div隐藏和显示
- 如何可以用openFileDialog实现打开txt文档并显示到文档中的内容
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现
- (源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字
- div layout. 可以拖拽的DIV布局实现
- 如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)
- 用DIV+CSS实现图文混排与文字列表一起显示