css3之文字自动换行word-break

最新推荐文章于 2022-09-03 17:12:53 发布
最新推荐文章于 2022-09-03 17:12:53 发布
阅读量334 收藏
点赞数
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/langrentao/article/details/79596043
版权

今天没用textarea，在div中直接加了一段文字，然后设了个宽高，文字超出去了，用overflow：scroll是只能向左右滑动；
查资料查到word-break:break-all;完美解决问题，自动换行啊，好用
word-break:break-all;

语法
word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

langrentao
关注
专栏目录
css中强制换行word-break、word-wrap、white-space区别实例说明
09-25
- break-word：在单词内部可以换行，从而避免溢出。 使用word-wrap:break-word;可以让长单词在溢出容器边界时进行适当的换行，大多数现代浏览器都能够识别这个属性。 3. white-space属性 white-space属性用来控制...
html、css 禁止文字自动换行属性word-break
12-04
在给定的标题和描述中，提到的是如何使用`word-break`属性来禁止文字自动换行。 `word-break`属性有以下几个可选值： 1. `normal`：这是默认值，遵循浏览器的默认换行规则，通常在单词内部不会强制断行，除非单词...
CSS3 文本换行
weixin_34248705的博客
12-18 233
文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了，会出现撑破容器的现象，很难看，如下图 容器定宽150px的前提下，普通文字如左图浏览器足以胜任自动换行，右图...
CSS3 自动换行
bestlove12345的博客
07-07 2239
CSS3 自动换行 css如何实现自动换行   下面是 CSS 代码： 简单实例： 允许对长单词进行拆分，并换行到下一行： p {word-wrap:break-word;} 复制代码 下面是产字符换行的  完整示例：   p.test { width:11em;  bo
CSS3让文本自动换行——word-break属性
weixin_33795743的博客
09-03 295
1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能。 2.指定自动换行的处理方法 在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。 div{ word-break:break-all; } word-break属性可以使用的值 值 换行规则 IE5以上 Safari与Chrome normal 使用浏览...
css3属性文字换行,CSS3让文本自动换行——word-break属性
weixin_29958955的博客
08-04 1280
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能。2.指定自动换行的处理方法在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。div{word-break:break-all;}word-break属性可以使用的值值换行规则IE5以上Safari与Chromenormal使用浏览器默认的换行规则支持支持keep-all只能在半角空格或连字符处换行支持不支...
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
总的来说，CSS3的`word-wrap`属性提供了一种有效的方式来处理英文文本的换行问题，使得网页设计更加灵活且易于维护。在创建响应式布局或者处理长字符串时，它是必不可少的工具之一。了解并熟练运用这个属性，可以...
css3属性文字换行,CSS3 文本效果
weixin_36216860的博客
08-04 424
CSS3 文本效果CSS3 包含多个新的文本特性。在本章中，您将学到如下文本属性：text-shadowword-wrap浏览器支持属性浏览器支持text-shadowword-wrapInternet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。所有主流浏览器都支持 word-wrap 属性。注释：Internet E...
css3 文本自动换行
周家大小姐
03-07 5272
关于文本自动换行问题 ,中文会自动换行,但是英文不会;如果想英文自动换行;需要用到 word-break div{ /* 关于文本自动换行问题 ,中文会自动换行,但是英文不会;如果想英文自动换行;需要用到 */ word-break: break-all; } ...
CSS3实现文字阴影与自动换行
z983002710的博客
07-30 1200
CSS3实现文字阴影与自动换行
CSS3笔记1 — 文字阴影、边框阴影、自动换行
erdouzhang
03-11 911
1. 文字阴影CSS:<style> h1 { text-shadow: 15px 15px 1px #ccc; } </style>html:<body> <h1>文字阴影</h1> </body>解析： text-shadow : x y r color; x: 阴影离开文字的横向距离。 y : 阴影离开文字的纵向距离. r : 阴影模糊半径。 color : 阴
CSS 实现自动换行、强制换行、强制不换行的属性
weixin_30616969的博客
11-12 1640
实现效果 1.自动换行： word-wrap:break-word; word-break:normal; 2.强制换行： word-break:break-all; 按字符截断换行 /* 支持IE和chrome，FF不支持*/ word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */ * 注意：单词换行需要父盒子为块...
CSS系列之文本换行
老__L的博客
09-03 1932
本文主要介绍CSS的overflow-wrap、word-break属性。CSS属性word-break指定了怎样在单词内断行。CSS 属性是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
CSS3之文本换行word-wrap
梦龙小站
10-10 2415
大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制，让其看起来接近完美。当CSS3出现的时候，我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。
css3文本效果——文字阴影和文字换行
zyz00000000的博客
09-28 671
1. 文字阴影：text-shadow text-shadow: h-shadow v-shadow blur color; text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。 值 描述 测试 h-shadow 必需。水平阴影的位置。向左为正值，允许负值。 测...
css3的文字阴影和换行
xuanwuziyou的专栏
08-26 713
1.文字阴影 text-shadow:阴影比文字右移的px,阴影比文字下移的px,阴影的模糊半径px,阴影的颜色    用法：  h1{  text-shadow:10px 10px 5px red  } 2. word-break  段落换行方式    值：word-break:normal  默认，使用浏览器默认换行方式           word-break:keep-all
CSS3文本
macanfa的博客
07-01 509
本文整理了CSS3文本的文本的各大属性、文本阴影、文本溢出、文本换行等，需要辅助以实战练习才能很好的理解与使用其中的属性
CSS中几个与换行有关的属性简明总结_css3_CSS_网页制作
starsliu
06-10 756
word-wrap normal 默认值。允许内容顶开指定的容器边界。 break-word 内容将在边界内换行。如果需要，词内换行也将发生。 白话解释：也就是说如果一个很长的英文单词如果超过了容器长度，是否折断英文单词，默认是不折断。 支持情况：IE、Firefox 3.6、Chrome 4 中测试通过。 word-break normal 默认值。依照亚洲语言和非亚洲语
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值