CSS 中文英文 换行问题

本文详细介绍了CSS中用于控制文本换行的属性,包括如何在不同情况下实现文本的正常换行、强制不换行、以及如何处理英文与中文的特殊换行需求。同时,提供了解决IE浏览器中英文文本撑开框架问题的方法。

Transshipment Booking System is launched只对英文起作用,以字母作为换行依据

Transshipment Booking System is launched只对英文起作用,以单词作为换行依据

Transshipment Booking System is launched只对中文起作用,强制换行

Transshipment Booking System is launched强制不换行,都起作用

不换行,超出部分隐藏且以省略号形式出现Transshipment Booking System is launched

代码:

 

<span style="font-size: 13px;">.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/   
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/   
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/   
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/   
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/ </span>


1. word-break:break-all;只对英文起作用,以字母作为换行依据

2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据

3.{white-space:pre-wrap; 只对中文起作用,强制换行

4.{white-space:nowrap; 强制不换行,都起作用

5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现

注意,一定要指定容器的宽度,不然的话是没有用的。

注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用break-all 。

强制不换行

div{

white-space:nowrap;

}

自动换行

div{

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

div{

word-break:break-all;

}

============================================

CSS设置不转行:

overflow:hidden 隐藏

white-space:normal 默认

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

设置强行换行

word-break:

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

============================================

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用break-all 。

对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }

### 使用 CSS 控制文本换行 #### 强制不换行 为了使文本在一行内显示而不进行任何换行操作,`white-space` 属性可被设为 `nowrap`。这会阻止浏览器自动插入换行符,即使遇到窗口边界也不会折行。 ```css div { white-space: nowrap; } ``` 此设置适用于所有类型的文本内容,无论是中文还是英文[^1]。 #### 强制换行 对于希望让文本按照指定条件换行的情况,则可以采用不同的策略: - **允许正常换行**:默认情况下,文本会在适当的位置(如单词之间)自然换行。 - **强制特定位置换行**:如果想要在某些特殊字符处打断并开始新的一行,比如URL链接中的斜杠(/),则可以在 HTML 中使用 `<wbr>` 标签来建议可能的断点,或者利用 CSS 的 `word-break` 和 `overflow-wrap` 属性来进行更灵活的处理。 ```css /* 让长单词或 URL 地址能够在任意字符间断裂 */ p.break-word { word-break: break-all; } /* 或者 */ /* 当单个词过长超出容器宽度时才考虑打破词语界限 */ p.wrap-anywhere { overflow-wrap: anywhere; } ``` 另外,在表格单元格 (`<td>`) 内部也可以应用类似的规则以确保内容能够适当地适应其空间需求[^4]。 #### 示例代码展示 下面是一个综合性的例子,展示了如何在一个简单的网页布局里分别应用这两种行为: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Text Wrapping Example</title> <style> .no-wrap { white-space: nowrap; border: 1px solid black; padding: 5px; } .force-wrap { width: 200px; /* 设置固定宽度以便观察效果 */ word-break: break-all; border: 1px dashed red; padding: 5px; } </style> </head> <body> <h3>强制不换行:</h3> <div class="no-wrap">这是一个非常长而且不应该有任何形式换行的文字串。</div> <br><br> <h3>强制换行:</h3> <p class="force-wrap">这里有一些很长但是应该根据设定好的区域大小合理分割成多行的内容。</p> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值