一、文本后图标,当文本正好撑满整行,使图标不换行
将图标利用绝对定位属性来定位
<div style="width: 150px;border: 1px solid red">
{{ '图标跟随在文本最后面' }}
<i class="iconfont icon-fuzhiicon" style="position: absolute"></i>
</div>
效果图:
二、控制文本最多n行 超出部分...展示
<div
style="
width: 160px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
">
{{ '限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示' }}
</div>
效果图:
三、控制文本在单行的时候居中展示,多行的时候居左展示
外层控制文本框大小,里面内容居中
内层宽度被文字撑开、文字居左
当内层宽度等于外层宽度时,内层宽度达到最大值,就会实现要求
<div style="width: 100px;border: 1px solid red;display: flex;justify-content: center;">
<div style="text-align: left">
测试需求
</div>
</div>
效果图:
四、将第二、三点组合起来,控制文本最多5行 超出部分...展示、并且文本在单行的时候居中展示,多行的时候居左展示
<div style="border: 1px solid red;display: flex;justify-content: center;width: 160px;">
<div
style="
background: blue;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
">
{{ '限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示限制最大行数超出...显示' }}
</div>
</div>
效果图: