css之自动换行

本文介绍了如何使用CSS属性解决网页布局中字符换行问题,包括div、p元素的正常换行、IE和Firefox浏览器下连续数字和英文字符的换行方法,以及table元素的换行解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

http://www.blueidea.com/tech/web/2006/3469.asp



自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法



对于div,p等块级元素 

   正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html

<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>

css

#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

#wrap{word-break:break-all; width:200px;}

或者

#wrap{word-wrap:break-word; width:200px;}


<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:可以实现换行


2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:容器正常,内容隐藏 

对于table


1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏


<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>


效果:隐藏多余内容 


2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行


3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用


<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>

效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框


最后,这种现象出现的几率很小,但是不能排除网友的恶搞

<!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=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>

<h1><code>IE \ word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE \ word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>


### CSS实现文字自动换行的方法 在CSS中,可以通过多种方式实现文字的自动换行效果。以下是几种常用的技术及其对应的属性: #### 使用 `word-wrap` 或 `overflow-wrap` 为了处理长单词或不可分割的内容,可以使用 `word-wrap` 属性(现已更名为 `overflow-wrap`)。该属性允许浏览器在必要时断开单词以适应容器宽度。 ```css div { word-wrap: break-word; /* 老版本 */ overflow-wrap: break-word; /* 新标准 */ } ``` 此方法适用于需要强制断开过长单词的情况[^2]。 #### 设置 `white-space` 的值为 `normal` 默认情况下,`white-space` 属性设置为 `normal` 会使得文本按照正常的换行规则进行换行。如果之前设置了其他值(如 `nowrap`),则需将其改回 `normal` 来恢复自动换行功能。 ```css p { white-space: normal; } ``` 这是最基础也是最常见的让文本自然换行的方式之一[^1]。 #### 利用 `hyphens` 进行连字符分隔换行 对于希望保持语义正确性的场景下,启用软连字符支持能够更优雅地完成跨行展示工作。这涉及到定义何时以及如何插入破折号来进行分行操作。 ```css span.hyphenated-text{ hyphens:auto;/* 启动自动加插短横线机制*/ } ``` 注意不同浏览器可能对此特性的兼容情况有所差异[^3]。 #### 组合应用以上技术 实际开发过程中往往不是单独依靠某一项特性就能满足所有需求,在某些复杂布局里也许得综合考虑并运用这些手段才能达到理想中的视觉呈现效果。 ```python /* 示例代码片段 */ .container { width: 200px; border: 1px solid black; /* 自动换行配置 */ white-space: normal; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值