强制中文/整个英文单词自动换行与不换行 - CSS笔记

默认的情况下、行末的长单词会撑开容器、不是我们想要的、我们想要的应该是不能撑开容器、而且完整的单词不能被强制拆开

在平时的Web开发过程中、默认的情况下、行末的长单词会撑开容器、不是我们想要的、我们想要的应该是不能撑开容器、而且完整的单词不能被强制拆开、如果行末是长单词的话、整个单词都被换行到下一行、就像word一样、能够自动换行。

既不撑大容器、也不强制拆开行末单词、并且不会隐藏行末单词的多余字母、本文将给你条案。

先看一下如下CSS代码:

.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;}//*不换行,超出部分隐藏且以省略号形式出现*/

介绍

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

强制不换行

p{
    white-space:nowrap;
}

自动换行

p{
    word-wrap: break-word;
    word-break: normal;
}

强制英文单词断行

p{
    word-break:break-all;
}

以上方法就是对英文或中文在浏览器上面的换行与不换行的处理、希望对大家有用

css

标签元素选择器 - CSS笔记

2020-11-18 20:53:37

css

图片横向排版最佳实践 - CSS笔记

2020-12-8 20:27:16

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索