【CSS Tricks】试试新思路行止置惩罚文本超出环境

引言

   本篇为css的一个小技巧
  文本溢出题目是一个较为常见的场景。UI操持稿为了整体的美观度会将文本内容限定到一定范围内，然而UI操持阶段并不能预先适配任意长度的文字信息，所以需要从开发侧利用一下，将文本限定在UI操持的范围内。
文本溢出的开发场景：

• 卡片标题过长
  
• 用户关照信息列表择要信息过长。
  
• 上传附件列表，文件名过长。
  
• 下拉列表选项文本过长。
  
• 其他
  

---

一、通例套路

预备一份文本内容：

1.     <div class="ellipsis_text">
2.       在网页或应用设计中，当多行文本内容超过设定的显示范围时，使用省略号来表示文本被截断是一种常见的做法。这不仅有助于保持界面的整洁美观，还能有效利用有限的空间展示尽可能多的信息。实现这一效果通常需要CSS样式支持，如设置overflow:
3.       hidden;、text-overflow: ellipsis;和display:
4.       -webkit-box;等属性，并结合-webkit-line-clamp属性控制显示的行数。这种方法适用于大多数现代浏览器，能够确保即使在不同设备上也能一致地呈现文本截断效果。
5.     </div>

复制代码

1. 单行文本省略

1. .ellipsis_text {
2.         width: 200px; /* 需限制宽度 */
3.         overflow: hidden; /* 隐藏溢出的内容 */
4.         white-space: nowrap; /* 确保文本在一行内显示 */
5.         text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
6. }

复制代码

2. 多行文本省略

1. .ellipsis_text {
2.         width: 200px;
3.         overflow: hidden; /* 隐藏溢出的内容 */
4.         display: -webkit-box;  /* 使用Webkit内核的弹性盒布局模型来显示对象。这种布局模型允许更灵活地控制子元素的排列和对齐方式。 */
5.         -webkit-line-clamp: 3;  /* 可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 属性设置成 vertical时才有效果。 */
6.         -webkit-box-orient: vertical; /* 设置弹性盒对象的子元素排列方向为垂直。这意味着子元素会从上到下依次排列，这对于多行文本尤其重要。 */
7. }

复制代码

将 -webkit-line-clamp 值设置为1，同样可以获得单行文本省略的效果。
各属性介绍查看上述代码解释

---

二、新思路美化一下

1. 单行/多行文本隐藏

   焦点点在于，利用overflow隐藏多余内容；利用伪类制作遮罩隐藏后半段，营造还有更多内容的引导效果。
  表明下代码操持逻辑

• 设置四个css变量：
  
  
  
  • --line_clamp 表现需要显示多少行。
    
  • --line_height 表现行高，这个很重要，这里实现的效果依赖于确定的行高，用于计算总体容器高度以及遮罩高度。
    
  • --background_color 和 --font_color 这两个变量依据自己需求设置即可，颜色需要反色使对比明显。
    
  
  
• 先确定文本行高，再利用 --line_clamp 乘以 --line_height 确定总体容器的高度。
  
• 利用伪类after设置背景色渐变，通过定位移动到最后一行进行内容遮罩。
  

1.     .ellipsis {
2.       --line_clamp: 3;
3.       --line_height: 2rem;
4.       --background_color: #000;
5.       --font_color: #fff;
6.       width: 400px;
7.       line-height: var(--line_height);
8.       height: calc(var(--line_height) * var(--line_clamp));
9.       overflow: hidden; /* 隐藏溢出的内容 */
10.       position: relative;
11.       background-color: var(--background_color);
12.       color: var(--font_color);
13.       font-weight: bold;
14.       font-size: 24px;
15.     }
16.     .ellipsis::after {
17.       content: "...";
18.       width: 400px;
19.       height: var(--line_height);
20.       position: absolute;
21.       right: 0;
22.       bottom: 0;
23.       background: linear-gradient(
24.         to right,
25.         transparent 50%,
26.         var(--background_color) 90%
27.       );
28.     }

复制代码

2. 看下效果

---

三、总结

本篇内容不算复杂，主要涉及到了css变量和css伪类两个要点。将通例样式固化，焦点样式提取出简朴易理解的变量方便定制化修改。灵活运用伪类，给本体dom添加额外装饰，到达终极样式的表达效果。
固然我们已经完成了长文本的隐藏功能，但是为了网页内容的完整性，我们仍需考虑添加title属性提示全文，或是点击弹窗、伸展dom等方式展示全文。在开发过程中不断美满整体的页面逻辑。
不屈不挠~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。