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