<span></span>标签自动换行

最新推荐文章于 2025-10-09 15:51:56 发布

原创最新推荐文章于 2025-10-09 15:51:56 发布 · 1.3w 阅读

11 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何使用CSS的display:inline-block, word-wrap和white-space属性来实现文本的自动换行和空白处理。通过设置span元素的显示模式为块级元素，并指定宽度，可以确保文本在达到容器宽度时自动换行。word-wrap属性允许在长单词或URL内部换行，而white-space属性则用于控制空白字符的处理方式。

标签自动换行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<div>
<span style="display:inline-block;width:60px;word-wrap:break-word;white-space:normal;">span标签换行span标签换span标签换span标签换</span>
<br />
<span style="display:inline-block;width:10%;word-wrap:break-word;white-space:normal;">span标签换行span标签换span标签换span标签换</span>
</div>
<body>
</body>
</html>

1.首先把span变成块级元素 display:inline-block

2.## 标题设置宽度，

一定保证宽度是一定的，百分数时，如果父级元素的宽度是可以改变的，那么span的宽度随之改变 width:10% width:60px

3.设置内容自动换行，word-wrap属性

word-wrap有两个取值：
1、word-wrap: normal：仅仅在同意的断字点换行（浏览器保持默认处理）。
2、word-wrap: break-word：在长单词或 URL 地址内部进行换行。（即在容器末端有长单词不能全然显示，不会截断单词，而是作为总体，自己主动换行）

4.设置空白的处理，white-space属性

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。