css之word-wrap和word-break属性

最新推荐文章于 2023-06-22 00:52:03 发布

anci5794

最新推荐文章于 2023-06-22 00:52:03 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/douglasvegas/p/7066740.html

word-wrap

属性允许长单词或 URL 地址换行到下一行。

属性：

normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 在长单词或 URL 地址内部进行换行

word-break

属性规定自动换行的处理方法。

属性：

normal 默认处理
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

转载于:https://www.cnblogs.com/douglasvegas/p/7066740.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

anci5794

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

word-wrap与word-break 属性的概述及浏览器默认处理

12-13

二、`word-wrap: break-word` 属性值在某些特殊情况下，比如长单词（如品牌名）或者连续的非空格字符序列，可能会导致文本溢出容器。这时，可以使用 `word-wrap: break-word;` 来处理这种情况： ```css word-wrap...

CSS word-wrap同word-break的区别

12-11

兼容 IE 和 FF 的换行 CSS 推荐样式最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何...

参与评论您还未登录，请先登录后发表或查看评论

css word-wrap和word-break强制换行

weixin_30746117的博客

08-21

690

本文摘自：http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。...

[CSS][CSS3] word-wrap和word-break

S号口袋怪:|

10-22

187

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、white-space

whaxrl的专栏

04-28

1024

一、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

434

转载： http://www.w3cplus.com/content/css3-word-wrap CSS3中有关于文本效果的属性，前面在《CSS3 Text-shadow》和《CSS3 Text-overflow》介绍了文本阴影，文本注解的使用，今天主题是超长英文文本自动换行word-wrap的使用，在介绍这个属性的同时，我还把word-break和white-space两

【CSS】word-wrap换行和 word-break断句

joanmelon的博客

10-26

921

☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~

css中强制换行word-break、word-wrap、white-space区别实例说明

09-25

CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似，但它们在处理文本换行的细节上有所不同，下面将详细...

css word-break word-wrap 前台显示自动换行

09-25

`word-break` 和 `word-wrap` 是两个非常重要的CSS属性，它们主要用于处理文本内容在容器内的换行规则，特别是在处理非标准长度的单词或字符串时。在描述中提到的场景是在一个`table`元素中应用这些样式，以确保内容...

css 英文换行 css(word-wrap/break)使纯英文数字自动换行

12-13

为了解决这个问题，我们可以利用`word-wrap`和`word-break`两个CSS属性。 `word-wrap`属性主要用于控制是否允许内容在单词内部换行。它有两个主要的取值： 1. `normal`：这是默认值，遵循浏览器的默认换行规则。在...

一个例子搞懂CSS中word-wrap、word-break

五花漏的博客

03-12

593

1、处理长单词溢出长单词过长，不仅自动换行，而且也超出了父容器。 <div class="longW">这有一个长单词叫 longggggggggggggggggggggggggggg </div> 首先，设置 word-wrap:break-word 再设置 word-break:break-all 看看 word-wrap 决定是否允许单词...

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

oChangYouLanTian的专栏

04-22

1043

通常情况下汉字会自适应标签宽度，自动换行显示，但是对于英文字母或数字就会溢出显示，不会自动折行显示，例如 test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...

学习笔记——CSS中word-break与word-wrap属性

qq_41339126的博客

11-23

1196

在书写CSS样式时，可能会遇到长文本不换行问题。使用以上两个属性可以解决大部分的问题。 1.word-break: word-break属性规定了自动换行的处理规则。  <view> <view class="text" style="width: 250px "> 11111111111,1asdasjdia,sjdioneoen,ee1231112121,,ad,a,sd <..

CSS：word-wrap同word-break的区别

管子（zero）的杂乱空间

09-06

1236

<script type="text/javascript"src="

CSS样式word-wrap和word-break的区别

readychenxxy的博客

03-26

524

CSS样式word-wrap和word-break的区别 word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 word-break: css的 word-break 属性用来标明怎么样进行单词内的断句。 normal 使用浏览器默认的换行规则。

CSS3 word-wrap和word-break长单词的换行

Jachin的博客

10-11

759

word-break和word-wrap的用法单词换行解决方法

微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-wrap

杭州.黄老师

01-14

1327

样式wxss中使用css课程-文本-word-wrap 基础用法 word-wrap 属性允许长单词或 URL 地址换行到下一行。 word-wrap： normal | break-word 值描述 normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。小程序应用 Wxml代码 <view> This is a...

css word-wrap

渴死的火烈鸟

12-09

113

http://www.css3.info/preview/word-wrap/

Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法

最新发布

03-21

### 使用 `word-wrap` 和 `word-break` 实现换行效果 #### 属性解释 `word-wrap` 和 `word-break` 是 CSS 中用于控制文本换行行为的重要属性。 - **`word-wrap: break-word;`** 此属性主要用于处理超出容器宽度的内容，允许长单词或 URL 被拆分到下一行。它仅在必要时才会打断单词[^2]。 - **`word-break: break-all;`** 这一属性更加激进，会在任何字符处强行断开单词，即使不需要打破单词也会如此操作。这种特性非常适合包含大量英文或其他非亚洲语言的场景[^4]。当应用于中文环境时，两者的区别主要体现在是否严格遵循语义分割上： - 对于纯中文内容来说，因为汉字之间不存在自然间隙（不像英文字母间存在空格），所以无论是采用 `word-wrap: break-word;` 或者是 `word-break: break-all;` 都能够正常工作并按需完成换行任务[^3]。然而需要注意的是，在混合型文档——即既含有中文又夹杂着较长不可分割单元比如技术术语、链接地址等情况之下，则应仔细权衡选用哪一种策略更为合适[^1]。以下是具体的应用实例以及代码展示部分: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Word Wrap & Break Example</title> <style> .example { width: 200px; border: 1px solid black; margin-bottom: 10px; } /* Using word-wrap */ .use-word-wrap { white-space: pre-line; word-wrap: break-word; } /* Using word-break */ .use-word-break { white-space: normal; word-break: break-all; } </style> </head> <body> <div class="example use-word-wrap">这是一个非常长的单个词语aaaaaaaaaaaaaaaabbbbbbbbbbbbcccccccccccddddddddddeeeeeeeeee。</div> <div class="example use-word-break">这是另一个例子：http://www.example.com/verylongurlthatneedstobebrokenintopieces.</div> </body> </html> ``` 以上HTML片段展示了两种不同方法的实际运用情况。第一个 div 利用了 `word-wrap: break-word;` 来优雅地处理超长字符串；而第二个则通过设置 `word-break: break-all;` 达到了同样的目的却可能破坏某些特定场合下的可读性[^5]。 ### 结论综上所述，在实际开发过程中可以根据项目需求灵活选择合适的解决方案。如果是针对一般性的网页布局设计，并且希望保持较好的用户体验，则推荐优先考虑使用 `word-wrap: break-word;` 。但如果面对特殊情形如表格内部单元格溢出等问题，则可以尝试引入更加强硬的方式 —— 即启用 `word-break: break-all;`.