【CSS Tricks】试试新思路去处理文本超出情况
引言
本篇为css的一个小技巧
文本溢出问题是一个较为常见的场景。UI设计稿为了整体的美观度会将文本内容限制到一定范围内，然而UI设计阶段并不能预先适配任意长度的文字信息，所以需要从开发侧操作一下，将文本限制在UI设计的范围内。
文本溢出的开发场景：
- 卡片标题过长
- 用户通知信息列表摘要信息过长。
- 上传附件列表，文件名过长。
- 下拉列表选项文本过长。
- 其他
一、常规套路
准备一份文本内容：
<div class="ellipsis_text">
在网页或应用设计中，当多行文本内容超过设定的显示范围时，使用省略号来表示文本被截断是一种常见的做法。这不仅有助于保持界面的整洁美观，还能有效利用有限的空间展示尽可能多的信息。实现这一效果通常需要CSS样式支持，如设置overflow:
hidden;、text-overflow: ellipsis;和display:
-webkit-box;等属性，并结合-webkit-line-clamp属性控制显示的行数。这种方法适用于大多数现代浏览器，能够确保即使在不同设备上也能一致地呈现文本截断效果。
</div>
1. 单行文本省略
.ellipsis_text {
width: 200px; /* 需限制宽度 */
overflow: hidden; /* 隐藏溢出的内容 */
white-space: nowrap; /* 确保文本在一行内显示 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
2. 多行文本省略
.ellipsis_text {
width: 200px;
overflow: hidden; /* 隐藏溢出的内容 */
display: -webkit-box; /* 使用Webkit内核的弹性盒布局模型来显示对象。这种布局模型允许更灵活地控制子元素的排列和对齐方式。 */
-webkit-line-clamp: 3; /* 可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 属性设置成 vertical时才有效果。 */
-webkit-box-orient: vertical; /* 设置弹性盒对象的子元素排列方向为垂直。这意味着子元素会从上到下依次排列，这对于多行文本尤其重要。 */
}
将 -webkit-line-clamp 值设置为1，同样可以获得单行文本省略的效果。
各属性介绍查看上述代码注释
二、新思路美化一下
1. 单行/多行文本隐藏
核心点在于，利用overflow隐藏多余内容；利用伪类制作遮罩隐藏后半段，营造还有更多内容的引导效果。
解释下代码设计逻辑
- 设置四个css变量：
--line_clamp表示需要显示多少行。--line_height表示行高，这个很重要，这里实现的效果依赖于确定的行高，用于计算总体容器高度以及遮罩高度。--background_color和--font_color这两个变量依据自己需求设置即可，颜色需要反色使对比明显。
- 先确定文本行高，再使用
--line_clamp乘以--line_height确定总体容器的高度。 - 利用伪类after设置背景色渐变，通过定位移动到最后一行进行内容遮罩。
.ellipsis {
--line_clamp: 3;
--line_height: 2rem;
--background_color: #000;
--font_color: #fff;
width: 400px;
line-height: var(--line_height);
height: calc(var(--line_height) * var(--line_clamp));
overflow: hidden; /* 隐藏溢出的内容 */
position: relative;
background-color: var(--background_color);
color: var(--font_color);
font-weight: bold;
font-size: 24px;
}
.ellipsis::after {
content: "...";
width: 400px;
height: var(--line_height);
position: absolute;
right: 0;
bottom: 0;
background: linear-gradient(
to right,
transparent 50%,
var(--background_color) 90%
);
}
2. 看下效果
三、总结
本篇内容不算复杂，主要涉及到了css变量和css伪类两个要点。将常规样式固化，核心样式提取出简单易理解的变量方便定制化修改。灵活运用伪类，给本体dom添加额外装饰，达到最终样式的表达效果。
虽然我们已经完成了长文本的隐藏功能，但是为了网页内容的完整性，我们仍需考虑添加title属性提示全文，或是点击弹窗、伸展dom等方式展示全文。在开发过程中不断完善整体的页面逻辑。
再接再厉~
原文地址：https://blog.csdn.net/weixin_44666711/article/details/142714975
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！