某些情况下CSS样式问题记录

一、文本后图标，当文本正好撑满整行，使图标不换行

将图标利用绝对定位属性来定位

<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>

效果图：