- 在日常学习中我们接触最多就是单行省略,文本超出一行之后使用省略号,那么当公司ui图上有这么一个需求:第一行正常展示,文本超出两行之后才使用省略号,那么该怎么写呢,接下来看代码,注意使用到的css样式——
- 单行文本超出省略:
<style>
.oneline{
border: 1px solid red;
background-color: skyblue;
/* 固定最大宽度 */
max-width:200px;
/* 不换行 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 文本超出时,显示省略标记 */
text-overflow: ellipsis;
}
</style>
<div class="oneline">这是第一行超出文本宽度省略的内容</div>
<style>
.moreline{
border: 1px solid red;
background-color: skyblue;
max-width:200px;
/* 超出部分隐藏 */
overflow:hidden;
/* 文本超出时,显示省略标记 */
text-overflow:ellipsis;
/* 弹性伸缩盒子模型 */
display:-webkit-box;
/* 子元素呈现3行 */
-webkit-line-clamp:3;
/* 子元素排列方式为垂直 */
-webkit-box-orient:vertical;
/*
备注:注意这两个属性是搭配使用的,同时留意浏览器是否支持
//Firefox
display:-moz-box;
-moz-box-orient:horizontal;
//Safari, Opera, and Chrome
display:-webkit-box;
-webkit-box-orient:horizontal;
*/
}
</style>
<div class="moreline">这是更多行超出文本宽度省略的内容;这是更多行超出文本宽度省略的内容;这是更多行超出文本宽度省略的内容;这是更多行超出文本宽度省略的内容</div>