文本超出部分省略号显示

原创已于 2023-04-12 11:14:14 修改 · 1.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

收录于

于 2021-11-06 14:26:43 首次发布

VUE 同时被 2 个专栏收录

17 篇文章

订阅专栏

uni-app

7 篇文章

订阅专栏

本文介绍了如何在uni-app中使用CSS样式实现文本内容超出部分的省略号显示，包括了关键的`text-overflow`, `-webkit-line-clamp`, 和 `white-space` 属性应用。适合开发者解决移动端文本溢出问题。

uni-app 文本超出部分省略号显示

今日在将文本超出部分省略号显示问题上遇到困难,从网上找到解决方法。特此记录便于日后查阅。

text {
					overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
}

p标签超出显示省略号

  p {
    width: 80%;

    overflow: hidden;
    // word-break: break-all;
    text-overflow: ellipsis;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 1;  // 表示超出2行显示省略号，以此类推
    white-space: nowrap;  // 是否允许文本换行
  }

隐藏滚动条：

::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;height: 0;
}