【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. 看下效果
https://i-blog.csdnimg.cn/direct/1e85aec287ff4e1fb087cb758b367c6d.png
三、总结
本篇内容不算复杂，主要涉及到了css变量和css伪类两个要点。将通例样式固化，焦点样式提取出简朴易理解的变量方便定制化修改。灵活运用伪类，给本体dom添加额外装饰，到达终极样式的表达效果。
固然我们已经完成了长文本的隐藏功能，但是为了网页内容的完整性，我们仍需考虑添加title属性提示全文，或是点击弹窗、伸展dom等方式展示全文。在开发过程中不断美满整体的页面逻辑。
不屈不挠~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]