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

embedded/2024/11/25 18:46:56/

在这里插入图片描述
在这里插入图片描述

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>css">.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>

思路解析整理

  1. li标签的基础样式

    • 设置line-height: 2;overflow: hidden;height: 2em;,使li标签的高度为当前字体大小的2倍,同时内容超出部分会被隐藏。
    • 由于line-heightheight都设置为2倍字体大小,文本在竖直方向上被居中显示。
  2. li内部两个span标签的作用

    • .txt标签:展示正常不需要省略号的完整文本。
    • .title标签:用来展示需要省略号的文本。
  3. .title的伪类设计

    • 伪类::before样式
      • 设置width: 50%;,搭配float: right;,使伪类的内容靠右显示。
      • 通过这种方式,.title和其伪类各占父级宽度的一半。
  4. 两端对齐

    • .title设置text-align: justify;:文本内容与伪类内容两端对齐,使文本的排列更美观。
    • 伪类内容的方向
      • 使用direction: rtl;设置伪类文本从右向左流动(Right-To-Left)。
      • 配合overflow: hidden;text-overflow: ellipsis;实现伪类文本的省略显示效果。
  5. .title.txt的重叠展示逻辑

    • .title的定位
      • 设置top: -4em;,使.title标签始终覆盖在.txt标签上方。
    • .txt的高度变化
      • 当内容较短时,.txt保持2em的默认高度。
      • 内容较长时,.txt高度扩展至4em(通过max-height: 4em;限制最大高度)。
    • 覆盖逻辑
      • .txt高度变为4em时,.title依旧在其上方,且内容显示为省略效果。

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

  1. 两端对齐

    • 文本两端(左边和右边)与容器边缘对齐。
    • 浏览器通过在单词之间添加额外空格来实现对齐效果。
  2. 最后一行对齐规则

    • 最后一行若仅有一个单词或少量单词,通常不会拉伸至填满整行,而是保持左对齐。

总结

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

理解 word-break: break-all;

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


特点

  1. 打破单词的完整性

    • 即使单词中间,也可以随意断开换行,不遵循单词本身的规则。
    • 示例:
      <div style="css">width: 100px; word-break: break-all;">Supercalifragilisticexpialidocious
      </div>
      
      如果容器宽度不足,可能会断成:
      Supercalifr
      agilisticex
      pialidociou
      s
      
  2. 适合的场景

    • 处理长串字符:如URL、文件路径、长变量名等,避免长内容超出容器范围。
    • 非自然语言的文本:适用于代码块、标识符或其他无需考虑语义完整性的文本。
  3. 区别于其他值

    • normal(默认值):单词内容不会被打断,只在空格或连字符等允许的换行点进行换行。
    • break-word(已废弃,但某些浏览器仍支持):在必要时打破单词换行,但优先尝试在容器边界处换行。
    • keep-all(主要用于CJK语言):中文、日文、韩文等不在单词间换行,但允许在空格处断行。

示例

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

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

ThisIsAnEx
tremelyLong
WordThatNe
edsToBreak
InOrderToF
itInTheCon
tainer

注意事项

  1. 用户体验

    • break-all可能影响阅读流畅性,尤其是自然语言文本时,建议慎用。
    • 对于用户界面(UI)中的长文本,优先考虑其他方式(如overflow: hidden;text-overflow: ellipsis;)。
  2. 语言支持

    • 在中文等连续书写的语言中,word-break: break-all;几乎不会有可见效果,因为中文默认可以在任意字符处换行。

总结

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


http://www.ppmy.cn/embedded/140460.html

相关文章

网络传输:网卡、IP、网关、子网掩码、MAC、ARP、路由器、NAT、交换机

目录 网卡IP网络地址主机地址子网子网掩码网关默认网关 MACARPARP抓包分析 路由器NATNAPT 交换机 网卡 网卡(Network Interface Card&#xff0c;简称NIC)&#xff0c;也称网络适配器。 OSI模型&#xff1a; 1、网卡工作在OSI模型的最后两层&#xff0c;物理层和数据链路层。物…

【技术支持】vscode不使用插件,两种方式重命名html标签对

1. 使用 VS Code 内置功能 VS Code 内置支持 HTML/XML 标签对的重命名功能。步骤如下&#xff1a; 将光标放置在标签名上&#xff08;如 <div> 或</div>&#xff09;。按下快捷键 F2&#xff08;重命名符号&#xff09;。输入新的标签名&#xff0c;按 Enter&…

信息收集ip测活-Python脚本编写

编写一个python脚本&#xff0c;下面为实现的功能点&#xff1a; 文件读取与IP提取&#xff1a;读取指定文件夹下的所有txt文件&#xff0c;提取其中的IP地址。 端口号添加&#xff1a;为每个IP地址添加多个指定的端口号。 测活功能&#xff1a;使用socket库进行连…

深入探索JMeter的执行器时间线:从CLArgsParser到JmeterEngine

引言 Apache JMeter是一款广泛使用的开源性能测试工具&#xff0c;它允许用户对各种服务进行负载测试。然而&#xff0c;了解其内部工作机制对于优化测试计划和提高测试效率至关重要。本文将深入探讨JMeter的执行器时间线&#xff0c;包括CLArgsParser、HashTree、StandardJme…

C语言:深入理解指针

一.内存和地址 我们知道计算机上CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处理后的数据也会放回内存中&#xff0c;那我们买电脑的时候&#xff0c;电脑上内存是 8GB/16GB/32GB 等&#xff0c;那这些内存空间…

【机器学习】超简明Python基础教程

Python是一种简单易学、功能强大的编程语言&#xff0c;适用于数据分析、人工智能、Web开发、自动化脚本等多个领域。本教程面向零基础学习者&#xff0c;逐步讲解Python的基本概念、语法和操作。 1. 安装与运行 安装Python 从官网 Welcome to Python.org 下载适合自己系统的…

RabbitMQ 之 死信队列

一、死信的概念 先从概念解释上搞清楚这个定义&#xff0c;死信&#xff0c;顾名思义就是无法被消费的消息&#xff0c;字面意思可以这样理 解&#xff0c;一般来说&#xff0c;producer 将消息投递到 broker 或者直接到 queue 里了&#xff0c;consumer 从 queue 取出消息进行…

Spring Boot与MyBatis-Plus的高效集成

Spring Boot与MyBatis-Plus的高效集成 引言 在现代 Java 开发中&#xff0c;MyBatis-Plus 作为 MyBatis 的增强工具&#xff0c;以其简化 CRUD 操作和无需编写 XML 映射文件的特点&#xff0c;受到了开发者的青睐。本篇文章将带你一步步整合 Spring Boot 与 MyBatis-Plus&…