强制中文/整个英文单词自动换行与不换行 – 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 实现新拟态(Neumorphism) UI 风格

2020-11-14 18:31:46

日本VPS美国VPS近期优惠香港VPS

Hotiis低至30元/月,75折优惠促销,KVM虚拟架构,免备案香港CN2 GIA/日本软银/美国CN2 GIA线路,充值返现

2020-7-18 23:02:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索