css利用word-wrap和word-break解决文本自动折行问题

最新推荐文章于 2022-04-15 14:50:47 发布
最新推荐文章于 2022-04-15 14:50:47 发布
阅读量876 收藏
点赞数 1
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oChangYouLanTian/article/details/105679871
版权

通常情况下汉字会自适应标签宽度，自动换行显示，但是对于英文字母或数字就会溢出显示，不会自动折行显示，例如

test.html
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="tset.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>1111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
<p>史蒂夫空间 发快递放假 的款式设计范德萨地方经济史 蒂夫空间发快递放假的款式 设计范德萨地方经济史蒂夫空间发快递放假的款式设计范德萨地方经济上岛咖啡健康大数据反馈到九分裤史蒂夫街道上看风景</p>
</body>
</html>

test.css

p{
    width:300px;
    border: 1px solid #cccccc;
}

运行效果为

但是我们想要的效果是这样的：

要达到上下两个p标签显示效果一致

可以结合使用word-wrap和word-break的属性解决这个问题

那么test.css改为如下代码就可以解决这个问题

p{
    width:300px;
    border: 1px solid #cccccc;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

word-break:break-all  允许在单词内换行

white-space:normal  默认空白会被浏览器忽略不换行  当opera浏览器不兼容word-break属性是可以使用white-space忽略空白，两个属性混合使用。

word-wrap:break-word 在长单词或 URL 地址内部进行换行。

在实际应用中white-space:normal，word-wrap:break-word ，word-break:break-all 同时使用可以使文本忽略不按空格换行。如果想实现按单词折行，可以将word-break:break-all省略。

畅游蓝天
关注
专栏目录
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
自从CSS3引入了`word-wrap`属性，我们就有了一个更优雅的方式来解决这个问题。 `word-wrap`属性主要用于控制文本是否可以在单词内部进行换行。这个属性对于处理那些过长的单词，如URL或特定的专有名词，非常有用。...
css 英文换行 css(word-wrap/break)使纯英文数字自动换行
12-13
为了解决这个问题，我们可以利用`word-wrap`和`word-break`两个CSS属性。 `word-wrap`属性主要用于控制是否允许内容在单词内部换行。它有两个主要的取值： 1. `normal`：这是默认值，遵循浏览器的默认换行规则。在...
css word-wrap和word-break强制换行
weixin_30746117的博客
08-21 620
本文摘自：http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。...
CSS网站实用技巧：word-wrap同word-break的区别
weixin_30408675的博客
11-14 152
兼容 IE 和 FF 的换行 CSS 推荐样式 　　最好的方式是 　　word-wrap:break-word; overflow:hidden; 　　而不是 　　word-wrap:break-word; word-break:break-all; 　　也不是 　　word-wrap:break-word; overflow:auto; 　　在 IE 下没有任何问题，在 FF 下，...
css word-wrap: break-word；
qq_45284875的博客
04-15 172
css： white-space: normal; word-break: break-all; word-wrap: break-word;
英文断句：理解 word-wrap、word-break用法
qq_44158936的博客
03-24 590
1、定义与属性 1.1、word-wrap 允许长单词换行到下一行 语法 word-wrap: normal|break-word; 值 描述 normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 1.2、word-break 在恰当的断字点进行换行 语法 word-break: normal|break...
word-break 与 word-wrap
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
09-03 845
break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器 break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理 每次看到这两个css属性都是一种眼晕的感觉，今天就来总结一下。 首先我们来来分别介绍一下这两个属性有哪些值： word-break: 值 描述 break-all 允许单词内换行 keep-all&nb...
css word-break word-wrap 前台显示自动换行
09-25
`word-break` 和 `word-wrap` 是两个非常重要的CSS属性，它们主要用于处理文本内容在容器内的换行规则，特别是在处理非标准长度的单词或字符串时。在描述中提到的场景是在一个`table`元素中应用这些样式，以确保内容...
CSS word-wrap同word-break的区别
09-25
在处理这一问题上，`word-wrap`和`word-break`属性扮演着重要的角色。这两个属性的主要区别在于它们处理文本的方式和适应场景。 首先，让我们探讨一下`word-wrap`属性。`word-wrap`是CSS3中的一个属性，用于处理当...
word-break:break-all和word-wrap:break-word区别总结
12-08
`word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性，它们都有各自的特点和适用场景。 首先，`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...
【CSS】word-wrap换行 和 word-break断句
joanmelon的博客
10-26 836
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
CSS 文本自动折行
qq_38244984的博客
01-28 603
word-wrap:break-word; word-break:break-all; white-space: normal; 缺一不可
[CSS][CSS3] word-wrap和word-break
S号口袋怪:|
10-22 147
word-wrap属性 用处：允许长单词换行到下一行 p.test {word-wrap:break-word;} word-break属性 用处：在恰当的断字点进行换行 p.test {word-break:hyphenate;} 区别 看到一篇讲得很清新的文章，移至原文阅读。 ????你真的了解word-wrap和word-break的区别吗 总结 引用参考原文： 事实上，word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句； 不同点是w
一个例子搞懂CSS中word-wrap、word-break
五花漏的博客
03-12 511
1、处理长单词溢出 长单词过长，不仅自动换行，而且也超出了父容器。 <div class="longW">这有一个长单词叫 longggggggggggggggggggggggggggg </div> 首先，设置 word-wrap:break-word 再设置 word-break:break-all 看看 word-wrap 决定是否允许单词...
CSS中word-wrap、word-break、white-space
whaxrl的专栏
04-28 980
一、word-wrap word-wrap:normal(默认)|break-word; 参数 normal：允许内容顶开指定的容器边界。 break-word:内容将在边界内换行，必要时触发word-break（注意请分辨清楚word-break和break-word两个是不同的东西，一个为属性，一个为参数）; 说明 word-wrap是控制是否”为词断行”的，设置或检索
CSS3 Word-wrap、word-break、white-space
wuyou1336的博客
02-28 391
转载： http://www.w3cplus.com/content/css3-word-wrap CSS3中有关于文本效果的属性，前面在《CSS3 Text-shadow》和《CSS3 Text-overflow》介绍了文本阴影，文本注解的使用，今天主题是超长英文文本自动换行word-wrap的使用，在介绍这个属性的同时，我还把word-break和white-space两
学习笔记——CSS中word-break与word-wrap属性
qq_41339126的博客
11-23 833
在书写CSS样式时，可能会遇到长文本不换行问题。使用以上两个属性可以解决大部分的问题。 1.word-break: word-break属性规定了自动换行的处理规则。 <!-- 固定的模板 view相当于div --> <view> <view class="text" style="width: 250px "> 11111111111,1asdasjdia,sjdioneoen,ee1231112121,,ad,a,sd <..
CSS：word-wrap同word-break的区别
管子（zero）的杂乱空间
09-06 1203
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
CSS样式word-wrap和word-break的区别
readychenxxy的博客
03-26 423
CSS样式word-wrap和word-break的区别 word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 word-break: css的 word-break 属性用来标明怎么样进行单词内的断句。 normal 使用浏览器默认的换行规则。
css的word-wrap
最新发布
05-10
CSS的`word-wrap`属性可以指定当单词太长无法在一行内完全显示时，是否允许单词中断换行，以及在哪里进行换行。该属性有以下两个可能的值： - `normal`（默认值）：单词不允许中断换行，只能在单词之间进行换行。 -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值