CSS文本换行方式

896 阅读1分钟
  • 文本超长不换行 white-space: nowrap;
.item {
  background-color: blue;
  width: 15rem;
  white-space: nowrap;
}

  • 文本超长 一行 & 文本溢出省略号
.item {
  background-color: blue;
  width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  • 多行文本溢出省略号(按行数)
.item {
  background-color: blue;
  width: 15rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)

display: -webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )

-webkit-box-orient: vertical;(和 1 结合使用 ,设置伸缩盒对象的子元素应该被水平或垂直排列 )

  • 单行居中显示文字,多行居左显示,限制行数省略号...
  <div class="container">
    <p>
      <em>一行文字一行文字</em>
    </p>
  </div>
.container {
  width: 200px;
  padding: 20px;
  border: 5px solid rgb(111,41,97);
  text-align: center;
}

p {
  margin: 1rem 0 1rem 0;
  background-color: #ff0000;
  display: inline-block;
  text-align: left;
}

em {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  font-style:normal;
}

参考资料

github.com/chokcoco/iC…