vue 标题文字字数过长超出部分用...代替 动态显示

效果:

浏览器最大化:

浏览器缩小:

代码:

html:

<div class="title overflow">{{item.name}}</div>
<div class="content overflow">{{item.content}}</div>

css:

.overflow {
  /* 一定要加宽度 */
  width: 90%;
  /* 文字的大小 */
  height: 20px;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 超出的文本隐藏 */
  overflow: hidden;
  /* 溢出用省略号 */
  text-overflow: ellipsis;
  /* 显示1行，控制显示的行数 */
  -webkit-line-clamp: 1;
  /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式) */
  -webkit-box-orient: vertical;
}