文本溢出【单行和多行文本溢出】

简介: 文本溢出【单行和多行文本溢出】

单行文本溢出方法:

方法一:

显示省略号(ellipsis):当单行文本溢出时,显示省略号表示被截断了。具体实现方式是设置 text-overflow:ellipsis,并且必须还要设置 white-space 和 overflow 属性。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

方法二:

显示字符串(string):当单行文本溢出时,显示指定的字符串。具体实现方式是设置 text-overflow: string,并且同时设置 content 属性。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}
.text::after {
  content: "..."; /* 溢出时显示... */
}

方法三:

不换行(clip):当单行文本溢出时,直接将超出部分剪切。具体实现方式是设置 text-overflow: clip,并且必须还要设置 white-space 和 overflow 属性。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

多行文本溢出:

方法一:

显示省略号(ellipsis):当多行文本溢出时,显示省略号表示被截断了。具体实现方式是设置 display: -webkit-box,-webkit-box-orient: vertical,并且必须还要设置 overflow 和 text-overflow 属性。

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

方法二:

使用 JavaScript 处理多行文本溢出:在实际开发中,我们也可以通过使用 JavaScript 来处理多行文本溢出。比较流行的库有 line-clamp.js 和 clamp.js 等。

<div class="text" id="text">
  一段多行文本,需要进行溢出处理...
</div>
<script src="https://unpkg.com/clamp-js/dist/clamp.min.js"></script>
<script>
  clamp(document.getElementById('text'), { clamp: 3 });
相关文章
|
9月前
|
人工智能 弹性计算 前端开发
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?
|
9月前
|
安全
如何快速断行、分割行、切割行、换行、限制每行字数、平均分割每行字数、序号自动换行、关键字断行等等内容格式整理
该工具用于文本格式处理,能调整每行字数、进行内容断行、提取特定格式内容等。在示例中,展示了如何将一段“交通安全教育”文字按30字每行分隔,并整理出带序号的格式。工具支持序号断行和多级序号设置,适用于笔记整理、文档格式化和内容布局优化,能提升工作效率。下载工具可从百度网盘(提取码:qwu2)或蓝奏云(提取码:2r1z)获取。
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
261 0
|
9月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
9月前
|
前端开发 JavaScript UED
|
9月前
|
前端开发
css实现单行文本溢出以及多行文本溢出
css实现单行文本溢出以及多行文本溢出
|
Web App开发 弹性计算 前端开发
CSS 单行/多行文本溢出显示省略号(...)的实现
CSS 单行/多行文本溢出显示省略号
307 0
CSS 单行/多行文本溢出显示省略号(...)的实现
多行文本溢出显示省略号
多行文本溢出显示省略号
79 0
|
前端开发
前端学习案例2-文本溢出-呈现圆点显示2多行文本溢出
前端学习案例2-文本溢出-呈现圆点显示2多行文本溢出
89 0