一、需求问题
在开发中，我们可能也会遇到这样的需求。当在单行或者多行的时候，文本的内容溢出了，需要隐藏，可以用省略号去表示。下面是我的实现方式。
二、需求分析
对于单行文本框溢出省略，我们可以使用overflow、white-space和text-overflow来进行单行文本省略截断，实现文本溢出省略的效果。对于多行文本框溢出省略，我们可以使用line-height、overflow、float、position和word-break来进行实现多行文本省略截断。
三、需求解决
1. 单行文本省略
<style>
.demo {
<!--文字长度超出限定宽度，则隐藏超出的内容-->
white-space: nowrap;
<!--设置文字在一行显示，不能换行-->
overflow: hidden;
<!--规定当文本溢出时，显示省略符号来代表被修剪的文本-->
text-overflow: ellipsis;
}
</style>
<body>
<div class="demo">这是一段文本</div>
</body
2. 多行文本省略
<style>
.demo {
background: #099;
max-height: 40px;
<!--结合元素高度,高度固定的情况下,设定行高, 控制显示行数-->
line-height: 20px;
<!--文本溢出限定的宽度就隐藏内容-->
overflow: hidden;
}
.demo::before{
<!--利用元素浮动的特性实现-->
float: left;
content:'';
width: 20px;
height: 40px;
}
.demo .text {
float: right;
width: 100%;
margin-left: -20px;
<!--使一个单词能够在换行时进行拆分-->
word-break: break-all;
}
.demo::after{
float:right;
content:'...';
width: 20px;
height: 20px;
<!--根据自身位置移动省略号位置, 实现文本溢出显示省略号效果-->
position: relative;
left:100%;
transform: translate(-100%,-100%);
}
</style>
<body>
<div class='demo'>
<div class="text">这是一段文本</div>
</div>
</body
