【CSS】样式改为单行文本，超出部分省略，并用省略号...替换超出部分

由于需要动态展示‘我喜欢贾静雯’字样（单行），我们不知道文本具体的长度。

故需要在样式里裁剪这段文本

调整样式

.recommentdSrroll .scrollItem text {
  font-size: 26rpx;
  /* 单行文本 */
  white-space: nowrap;
  /* 溢出隐藏。 */
  overflow: hidden;
  /* overflow只能作用于块级元素，内联元素不涉及到溢出，故调整为块级元素 */
  display: block;

---

文本过长，我们需要将超出部分用省略号代替。

调整代码如下

.recommentdSrroll .scrollItem text {
  font-size: 26rpx;
  /* 单行文本溢出，省略号代替 */
  /* 单行文本 */
  white-space: nowrap;
  /* 溢出隐藏。 */
  overflow: hidden;
  /* overflow只能作用于块级元素，内联元素不涉及到溢出，故调整为块级元素 */
  display: block;
  /* text-overflow为文本溢出时用什么代替 */
  /* 默认clip为直接省略，当ellipsis用...代替 */
  text-overflow: ellipsis;
}

 

---

文本相关css知识点：

1.搞清楚块级和内联元素的区别

2.如何固定为单行文本？

     white-space: nowrap;

3.如何文本溢出隐藏

     overflow: hidden;

     display: block;

4.text-overflow为文本溢出时用省略号代理

     text-overflow: ellipsis;

 

 

---

补充css3知识点：样式改为多行文本，超过部分隐藏并使用省略号（学会CV）

  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;    // 显示几行就是写几
  -webkit-box-orient: vertical;