CSS3之文本换行word-wrap

桃扇骨 2022-09-10 04:29 242阅读 0赞

大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制，让其看起来接近完美。当CSS3出现的时候，我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。

一、word-wrap的语法

**1、语法**

word-wrap ： normal || break-word

**2、取之说明**

(1)normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器);

(2)break-word将内容在边界内换行

二、word-wrap的兼容情况

![梦龙小站][SouthEast]

三、word-wrap的实例

**CSS代码：**

div {width:300px;height:200px;border:1px solid #ccc;word-wrap:break-word;}

**HTML代码：**

<div>menglongxiaozhan menglongxiaozhan 梦龙小站 menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiao
    zhan menglongxiaozhan menglongxiaozhanmenglongxiaozhanmenglongxiaozhan menglongxiaozhan menglongxiaozhan</div>

**预览效果：**

![梦龙小站][SouthEast 1]

CSS3之文本换行word-wrap就为大家介绍到这里，这个属性基本上兼容所有主流浏览器，是个不错的属性哟。更多CSS3属性方面的介绍，尽情关注本blog的更新。感谢大家一直以来对梦龙小站的支持与厚爱。

[SouthEast]: /images/20220829/82028512af3a4055a85d066ba242b0fb.png
[SouthEast 1]: /images/20220829/22c8d8e3d1da474cb37a74bd2d1d0bde.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现强制不换行、自动换行、强制换行的css代码

制不换行 p \{ white-space:nowrap; \} 自动换行 p \{ word-wrap:break-word; word-break:n...

灰太狼/ 2024年04月19日 15:09/ 0 赞/ 75 阅读

相关 css--文本换行最简单的实现方式

在做一些项目的时候，经常会用到textarea来录入内容，之后再将其以其他标签展示出来。在textarea中含有空格键、换行键的时候，如果直接上传给服务器，之后在返回的数据

╰+哭是因爲堅強的太久メ/ 2022年09月27日 14:22/ 0 赞/ 192 阅读

相关 CSS3之文本换行word-wrap

　　大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制，让其看起来

桃扇骨/ 2022年09月10日 04:29/ 0 赞/ 243 阅读

相关 CSS 强制换行

一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行

我不是女神ヾ/ 2022年07月27日 12:00/ 0 赞/ 273 阅读

相关 CSS之换行

都说前端的东西多，难记，不说js那些各种各样的方法，那些经常用到的话还好一些，随手都可以拾起来，但是css中的参数则不然，除了一些根深蒂固性的东西，一些特殊的

矫情吗；*/ 2022年07月11日 14:11/ 0 赞/ 201 阅读

相关 CSS控制文本自动换行

![Center][] [Center]: /images/20220608/d94b480f135b41b9a02f8a742ba7c5ec.png

忘是亡心i/ 2022年06月08日 07:26/ 0 赞/ 278 阅读

相关 CSS——解决文本溢出／自动换行／文字两端对齐

1 单行文本溢出 .text{ width: 100px;//宽度要定义好 overflow: hidden;//溢出隐藏

青旅半醒/ 2022年05月23日 02:45/ 0 赞/ 428 阅读

相关 css3文本效果——文字阴影和文字换行

1. 文字阴影：text-shadow text-shadow: h-shadow v-shadow blur color; text-shadow 属性向文本添加

偏执的太偏执、/ 2022年05月08日 22:22/ 0 赞/ 374 阅读

相关 CSS强制换行

CSS强制换行近来在项目中又遇上讨厌的换行问题，所以不得不又google一下，总算完成了任务。对于CSS不熟悉的朋友可以学习以下的文字。以下内容来自网络，

客官°小女子只卖身不卖艺/ 2021年10月24日 04:12/ 0 赞/ 433 阅读

相关 css文本超出宽带自动换行

css文本超出宽带自动换行样式word-wrap:break-word 效果样式word-wrap:break-word <!DOC

た入场券/ 2021年10月01日 02:20/ 0 赞/ 449 阅读