CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示

🕗 发布于 2024-11-22 18:49 css 前端

在这里插入图片描述

HTML 结构解析

文档结构:
- <ul class="con">: 一个无序列表，包含多个列表项。
  - 每个 <li class="wrap"> 表示一个列表项，内部有两个 <span> 元素：
    - <span class="txt">: 显示文本内容。
    - <span class="title">: 显示带有 title 属性的文本内容，鼠标悬停到此元素时会显示titile提示。

CSS 样式解析

全局样式:
- .con:
  - font-size: 14px;: 字体大小为 14 像素。
  - color: #666;: 文字颜色为灰色。
  - width: 600px;: 宽度为 600 像素。
  - margin: 50px auto;: 上下边距为 50 像素，左右居中。
  - border-radius: 8px;: 圆角边框。
  - padding: 15px;: 内边距为 15 像素。
  - overflow: hidden;: 超出部分隐藏。
  - resize: horizontal;: 可以水平调整大小。
  - box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;: 添加阴影效果。
- .wrap:
  - position: relative;: 相对定位。
  - line-height: 2;: 行高为 2。
  - height: 2em;: 高度为 2 倍字体大小。
  - padding: 0 10px;: 左右内边距为 10 像素。
  - overflow: hidden;: 超出部分隐藏。
  - background: #fff;: 背景颜色为白色（注释掉了）。
  - margin: 5px 0;: 上下边距为 5 像素。
- .wrap:nth-child(odd):
  - background: #f5f5f5;: 奇数行背景颜色为浅灰色。
- .title:
  - display: block;: 块级元素。
  - position: relative;: 相对定位。
  - background: inherit;: 继承父元素背景。
  - text-align: justify;: 文本两端对齐。
  - height: 2em;: 高度为 2 倍字体大小。
  - overflow: hidden;: 超出部分隐藏。
  - top: -4em;: 向上偏移 4 倍字体大小。
  - word-break: break-all;:字符可任意断行
- .txt:
  - display: block;: 块级元素。
  - max-height: 4em;: 最大高度为 4 倍字体大小。
- .title::before:
  - content: attr(title);: 插入 title 属性的内容。
  - width: 50%;: 宽度为 50%。
  - float: right;: 右浮动。
  - white-space: nowrap;: 不换行。
  - overflow: hidden;: 超出部分隐藏。
  - text-overflow: ellipsis;: 超出部分显示省略号。
  - direction: rtl;: 文本方向从右到左。
  - background: green;: 背景颜色为绿色。
  - text-align: justify;: 文本两端对齐。

功能解析

文本溢出处理:
- 使用 overflow: hidden; 和 text-overflow: ellipsis; 处理文本溢出，超出部分显示省略号。
- 使用 ::before 伪元素插入 title 属性的内容，并设置样式使其在右侧显示。
列表项样式:
- 列表项交替背景颜色，奇数行背景为浅灰色，偶数行为默认背景色。
- 列表项的高度和内边距设置使得内容整齐排列。
阴影效果:
- 列表容器 .con 使用 box-shadow 添加阴影效果，增强视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul class="con">
    <li class="wrap">
      <span class="txt">B123我_YSDF_13y98139_beijingtouc301医院</span>
      <span class="title" title="B123我_YSDF_13y98139_beijingtouc301医院">
        B123我_YSDF_13y98139_beijingtouc301医院
      </span>
    </li>
    <li class="wrap">
      <span class="txt">CSS 实现两端限制==的技巧 - 2021-03-26</span>
      <span class="title" title="CSS 实现两端限制==的技巧- 2021-03-26">CSS 实现两端限制==的技巧- 2021-03-26</span>
    </li>
    <li class="wrap">
        <span class="txt">CSS 测试切片号，这是一个稍微有点长的切片号，超出一行以后才会有title提示，切片号是  B1-2021-03-26-9YYDS90金山</span>
        <span class="title" title="CSS 测试切片号，这是一个稍微有点长的切片号，超出一行以后才会有title提示，切片号是  B1-2021-03-26-9YYDS90金山">
          CSS 测试切片号，这是一个稍微有点长的切片号，超出一行以后才会有title提示，切片号是  B1-2021-03-26-9YYDS90金山</span>
    </li>
    <li class="wrap">
      <span class="txt">B123我YSDF_13y98139_beijingtouc301医院</span>
      <span class="title" title="B123我YSDF_13y98139_beijingtouc301医院">
        B123我YSDF_13y98139_beijingtouc301医院</span>
  </li>
</ul>
<style>
  .con {
    font-size: 14px;
    color: #666;
    width: 600px;
    margin: 50px auto;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
    resize: horizontal;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}

.wrap {
    position: relative;
    line-height: 2;
    height: 2em;
    padding: 0 10px;
    overflow: hidden;
    background: #fff;
    margin: 5px 0;
    /* border: 1px solid red; */
}

.wrap:nth-child(odd) {
    background: #f5f5f5;
}

.title {
    display: block;
    position: relative;
    background: inherit;
    text-align: justify;
    height: 2em;
    overflow: hidden;
    top: -4em;
    /* background: red; */
    word-break: break-all;
    /* white-space: nowrap; */
}

.txt {
    display: block;
    max-height: 4em;
}
.title::before{
    content: attr(title);
    width: 50%;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    /* background: green; */
    text-align: justify;
}
.test{
  /* border: 1px solid red; */
  width: 90px;
  overflow: hidden;
  height: 2em;
  font-size: 14px;
  line-height: 2;
  /* white-space: nowrap; */
  
  text-overflow: ellipsis;
  /* text-align: justify; */
  /* direction: rtl; */
}
</style>
</body>
</html>

思路解析整理

li标签的基础样式
- 设置line-height: 2;、overflow: hidden;、height: 2em;，使li标签的高度为当前字体大小的2倍，同时内容超出部分会被隐藏。
- 由于line-height与height都设置为2倍字体大小，文本在竖直方向上被居中显示。
li内部两个span标签的作用
- .txt标签：展示正常不需要省略号的完整文本。
- .title标签：用来展示需要省略号的文本。
.title的伪类设计
- 伪类::before样式：
  - 设置width: 50%;，搭配float: right;，使伪类的内容靠右显示。
  - 通过这种方式，.title和其伪类各占父级宽度的一半。
两端对齐
- .title设置text-align: justify;：文本内容与伪类内容两端对齐，使文本的排列更美观。
- 伪类内容的方向：
  - 使用direction: rtl;设置伪类文本从右向左流动（Right-To-Left）。
  - 配合overflow: hidden;和text-overflow: ellipsis;实现伪类文本的省略显示效果。
.title和.txt的重叠展示逻辑
- .title的定位：
  - 设置top: -4em;，使.title标签始终覆盖在.txt标签上方。
- .txt的高度变化：
  - 当内容较短时，.txt保持2em的默认高度。
  - 内容较长时，.txt高度扩展至4em（通过max-height: 4em;限制最大高度）。
- 覆盖逻辑：
  - 当.txt高度变为4em时，.title依旧在其上方，且内容显示为省略效果。

知识点补充：`text-align: justify` 的特点

两端对齐：
- 文本两端（左边和右边）与容器边缘对齐。
- 浏览器通过在单词之间添加额外空格来实现对齐效果。
最后一行对齐规则：
- 最后一行若仅有一个单词或少量单词，通常不会拉伸至填满整行，而是保持左对齐。

总结

通过伪类::before、定位top、两端对齐text-align: justify等CSS技巧，.title和.txt标签在不同情况下能实现动态切换与覆盖，同时保证文本省略和展示效果的平衡。

理解 `word-break: break-all;`

CSS 属性 word-break 定义了当单词内容过长无法完全显示时，如何进行换行处理。具体到 word-break: break-all;，其作用是强制在任意字符间断行，不考虑单词的完整性。

特点

打破单词的完整性：
- 即使单词中间，也可以随意断开换行，不遵循单词本身的规则。
- 示例：
```
<div style="width: 100px; word-break: break-all;">
  Supercalifragilisticexpialidocious
</div>
```
  如果容器宽度不足，可能会断成：
```
Supercalifr
agilisticex
pialidociou
s
```
适合的场景：
- 处理长串字符：如URL、文件路径、长变量名等，避免长内容超出容器范围。
- 非自然语言的文本：适用于代码块、标识符或其他无需考虑语义完整性的文本。
区别于其他值：
- normal（默认值）：单词内容不会被打断，只在空格或连字符等允许的换行点进行换行。
- break-word（已废弃，但某些浏览器仍支持）：在必要时打破单词换行，但优先尝试在容器边界处换行。
- keep-all（主要用于CJK语言）：中文、日文、韩文等不在单词间换行，但允许在空格处断行。

示例

<div style="width: 150px; border: 1px solid black; word-break: break-all;">
  ThisIsAnExtremelyLongWordThatNeedsToBreakInOrderToFitInTheContainer
</div>

显示效果：

如果宽度不足，文本会按字符逐个断行，例如：

ThisIsAnEx
tremelyLong
WordThatNe
edsToBreak
InOrderToF
itInTheCon
tainer

注意事项

用户体验：
- break-all可能影响阅读流畅性，尤其是自然语言文本时，建议慎用。
- 对于用户界面（UI）中的长文本，优先考虑其他方式（如overflow: hidden;或text-overflow: ellipsis;）。
语言支持：
- 在中文等连续书写的语言中，word-break: break-all;几乎不会有可见效果，因为中文默认可以在任意字符处换行。

总结

word-break: break-all; 是一个强制性换行的规则，适用于需要在字符级别强制换行的场景，但对自然语言文本的可读性可能有负面影响，适合用在代码、高级表格或非语言文本的情况下。

原文地址：https://blog.csdn.net/m0_46672781/article/details/143932717

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：卷积神经网络各层介绍
下一篇：uniop触摸屏维修eTOP40系列ETOP40-0050

上海市计算机学会竞赛平台2022年8月月赛丙组屏幕比例
现实生活中，我们一般把屏幕的宽度和高度的比例，称为屏幕比例，或称为屏幕长宽比。其中第一个数字为屏幕分辨率的水平像素，第二个数字为屏幕分辨率的竖直像素。的形式输入，请你按给定格式输出该屏幕的长宽比。(我
阅读更多2024-11-22
Linux环境基础开发工具的使用（yum、vim、gcc、g++、gdb、make/Makefile）
本文介绍了yum 包管理工具、Vim 编辑器、gcc/g++ 编译器、gdb 调试器、编译原理及 Makefile 的使用，同时还配备了如何使用，以及图解。旨在帮助读者更好地理解和应用这些工具与技术。
阅读更多2024-11-22
H.264/H.265播放器EasyPlayer.js网页全终端安防视频流媒体播放器关于iOS不能系统全屏
EasyPlayer.js播放器不仅支持H.264与H.265视频编码格式，也能支持WebSocket-FLV、HTTP-FLV、HLS（m3u8）、WebRTC、ws-fmp4、http-fmp4等
阅读更多2024-11-22
xiaolin coding 图解网络笔记——基础篇
协议栈的内部分为几个部分，分别承担不同的工作。上下关系有一定的规则，上面的部分会向下面的部分委托工作，下面的部分收到委托的工作并执行。应用程序（浏览器）通过调用 Socket 库。来委托协议栈工作。协
阅读更多2024-11-22
OpenHarmony-2.DeviceInfo适配
ohos.boot.sn参数值的获取方式：首先从cmdline（由uboot生成）获取，如果获取到的是sn值则直接读取，若获取的是文件路径，则从文件中读取；当获取不到时从默认的Sn文件读取，默认文件为
阅读更多2024-11-22
C语言-指针作为函数返回值及二级指针
对于上面的两个例子，func() 运行结束后 n 的内存依然保持原样，值还是 100，如果使用及时也能够得到正确的数据，如果有其它函数被调用就会覆盖这块内存，得到的数据就失去了意义。第一个例子在调用其
阅读更多2024-11-22
【C语言】遗传算法matlab程序
适应度函数通常是根据所求解的问题定义的，其目的是评价每个解决方案（个体）的好坏。例如，如果你是在寻找一个函数的最大值，适应度可能是负值，因为MATLAB的排序函数默认会按升序排列，所以较小的数值会被认
阅读更多2024-11-22
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
Pinia.js是Vue3官方推荐的轻量级状态管理库，旨在替代Vuex。它提供了响应式状态管理，支持TypeScript，简化了模块化和插件系统。Pinia优化了开发体验，减少了样板代码，提高了性能。
阅读更多2024-11-22
python中的OS模块的基本使用
🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏
阅读更多2024-11-22
Parker派克防爆电机在实际应用中的安全性能如何保证？
Parker防爆电机通过防爆外壳、国际安全标准、专用防爆认证、低火花设计、定制化绕组、应用案例验证及温度管理，确保实际应用中的安全性能，防止爆炸风险，保障安全。
阅读更多2024-11-22