文本超出显示省略号

Question

<IMG src="file:///C:UsersAdministratorAppDataRoamingfeiqRichOle685403097.bmp">

如图，有些文字已经超出了，就是直接给截断了，并没有给我显示省略号。

css样式如下：

.list {
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1px solid #333;
  overflow: hidden;
}

.list .item {
  /*width:30px;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我还在纠结要不要限制width，请大神帮忙解决一下。

Answer 1

省略号 有那么几种，有一行，两行 多行

首先
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

这三行是必须 必须的

然后
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

Answer 2

你需要给 list 类的上级添加一个 width：100% 就行了

Answer 3

style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
当长度超过100px的时候，就会自动替换成...