适配移动端css代码，自动换行，自动换词
/*Only phones */
@media only screen and (max-width: 640px) {
/**
* Break strings if their length exceeds the width of their container
*/
body {
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
}移动端适配 CSS 代码逐行讲解
css
/*Only phones */
含义：这是一条注释，说明下面的 CSS 代码只针对手机设备。
词源：注释中的 "Only phones" 意为"仅限手机"。
作用：提醒开发者这段代码是为手机屏幕尺寸专门编写的适配规则。
css
@media only screen and (max-width: 640px) {含义：这是一个媒体查询，它定义了一个条件：只有当屏幕宽度小于或等于 640 像素时，花括号内的 CSS 规则才会生效。
词源：
@media：CSS 的媒体查询规则（Media Query）only：限定符，表示"仅仅"，用于避免老版本浏览器误解析screen：媒体类型，表示设备是屏幕（区别于打印、语音等）and：逻辑与，连接多个条件max-width：最大宽度条件640px：临界值，640 像素
作用：当用户在手机（屏幕宽度 ≤ 640px）上访问网页时，里面的样式就会生效；在电脑（屏幕宽度 > 640px）上则不生效。
css
/** * Break strings if their length exceeds the width of their container */
含义：多行注释，说明下面代码的作用——当字符串长度超过容器宽度时，进行换行处理。
词源：注释中的英文意为"如果字符串长度超过其容器宽度，则进行断行"。
作用：解释接下来的 CSS 规则是为了防止长单词或长 URL 溢出容器，导致页面布局错乱。
css
body {含义：选择器，选中页面中的 <body> 元素。
作用：对 body 元素应用接下来的样式规则。
css
word-wrap: break-word;
含义：当单词太长，一行放不下时，允许在单词内部进行换行。
词源：
word：单词wrap：包裹、换行break-word：在单词内部断开
作用：防止长单词（如超长 URL、长字符串）溢出容器边界。例如一个很长的英文单词 "Supercalifragilisticexpialidocious"，如果容器宽度不够，就会在单词中间换行，而不是溢出容器。
css
-webkit-hyphens: auto;
含义：为 WebKit 内核浏览器（如 Chrome、Safari）启用自动连字符功能。当单词在行尾断开时，自动添加连字符 "-"。
词源：
-webkit-：浏览器私有前缀，针对 WebKit 内核hyphens：连字符（hyphen 的复数形式）auto：自动模式
作用：当英文单词在行尾被断开换行时，浏览器会在断开位置自动插入一个连字符 "-"，让阅读更自然。例如："Supercalifragi- listicexpialidocious"。
css
-ms-hyphens: auto;
含义：为 IE 和 Edge 浏览器启用自动连字符功能。
词源：
-ms-：Microsoft 浏览器的私有前缀（IE、Edge）
作用：与 -webkit-hyphens 相同，但针对微软浏览器。由于不同浏览器的内核不同，需要使用各自的私有前缀来确保兼容性。
css
-moz-hyphens: auto;
含义：为 Firefox 浏览器启用自动连字符功能。
词源：
-moz-：Mozilla Firefox 的私有前缀
作用：与上面相同，针对 Firefox 浏览器。
css
hyphens: auto;
含义：标准的连字符属性，启用自动连字符功能。
词源：
hyphens：连字符（标准属性名，无前缀）
作用：这是 W3C 标准定义的属性。理论上写这一行就够了，但由于老版本浏览器需要私有前缀，所以通常会把标准写法放在最后，作为兜底。
css
}}
含义：两个右花括号，分别关闭上面的 body 选择器和 @media 媒体查询。
作用：结束代码块。
整体总结
这段 CSS 代码的作用是：在手机屏幕（宽度 ≤ 640px）上，让页面中的长文本能够自动换行，并在合适的位置添加连字符。
为什么需要这段代码？
电脑屏幕宽，一般不会出现文本溢出
手机屏幕窄，长单词或长 URL 很容易溢出容器
默认情况下，英文单词只在空格处换行，长单词会溢出
效果对比
| 没有这段代码 | 有这段代码 |
|---|---|
| 长单词溢出容器，出现横向滚动条 | 长单词在容器边界处自动断开换行 |
| 阅读体验差，需要左右滑动 | 阅读体验好，内容自适应屏幕 |
实际示例：
没有适配： ┌─────────────────────────────┐ │ 这是超长单词Supercalifragilisticexpialidocious│ ← 溢出 └─────────────────────────────┘ 有适配： ┌─────────────────────────────┐ │ 这是超长单词Supercalifragi- │ │ listicexpialidocious │ ← 自动换行加连字符 └─────────────────────────────┘