CSS

文本溢出时省略

单行文本

单行文本溢出时添加省略号很常见，先使用 white-space: nowrap; 强制文字不换行；然后使用 overflow: hidden; 隐藏溢出部分；最后使用 text-overflow: ellipsis; 给溢出文字添加省略号。

.xxx {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本

由于单行文本强制不换行，在多行文本时并不适用。所以需要使用其他方案。

方式一：基于 -webkit-line-clamp 实现

使用 -webkit-line-clamp 属性指定行数。（兼容性：必须是 Webkit 内核的浏览器）

注意

-webkit-line-clamp 生效条件：

• display 设置为 -webkit-box 或 -webkit-inline-box
• webkit-box-orient 属性必须为 vertical

示例：

.xxx {
  display: -webkit-box; // 弹性伸缩盒子模型
  -webkit-box-orient: vertical; // 从顶部向底部垂直布置子元素
  overflow: hidden; // 隐藏文本溢出内容
  -webkit-line-clamp: 2(3);  // 截断行数（这里是两行或三行，也可以指定单行）
}

input 宽度随文字长度变化

方法：input 外层套一层 div，input 宽高设置为 100%，宽度随父容器改变。div 中还需要塞一个 span，用来撑起 div 的宽高。将 span 隐藏 ，内容与 input 同步即可实现需求

参考代码：

<div class="add-tag tag-item">
   <span>{{ inputValue }}</span>
   <input v-model="inputValue">
</div>

<style>
    .add-tag {
       height: 32px;
       position: relative;

       span {
           display: inline-block;
           width: 100%;
           height: 100%;
           visibility: hidden;
       }

       input {
           width: 100%;
           height: 100%;
           display: inline-block;
           position: absolute;
           left: 0;
           top: 0;
           border: none;
           border-bottom: 1px dashed #ccc;
       }
   }
</style>