文本超出部分省略号显示

WJLSH123

已于 2023-04-12 11:14:14 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app VUE 文章标签： css css3 html

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

本文链接：https://blog.csdn.net/WJLSH123/article/details/121178622

VUE 同时被 2 个专栏收录

17 篇文章

订阅专栏

uni-app

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}