您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古快三预测一定牛:word-wrap自动换行 css强行自动换行样式教程

连续字母或数字不换行,会溢出超出对象设置宽度不换行,css word-wrap自动换行样式来解决。

一、word-wrap介绍

word-wrap是设置对象内文字遇到对象顶边时是否采取换行排版布局。

1、语法
word-wrap:normal—— 允许内容顶开指定的容器边界,遇到连续没有空格英文或没有空格数字不换行(默认,不设置对象也具备默认样式)
word-wrap:break-word —— 内容将在边界内换行,当内容太多顶到对象边界时,内容自动强制换行。

2、常见情况
对象内连续数字或字母太多后,内容顶边对象容器后不会换行,而是溢出继续不换行显示。和汉字或有空格不同,汉字会定格容器边界会自动换行。

不换行的数字和英文字母
连续数字或字母造成不自动换行

3、使用语法
p{word-wrap:break-word}
设置html段落p内文字顶格对象容器边缘自动换行。

二、自动换行word-wrap属性实例教程

1、代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css强制换行 thinkcss实例</title>
<style>
.bos{ width:200px; height:80px; border:1px solid #F00; word-wrap: break-word; }
</style>
</head>

<body>
<p class="bos">83480348023802ufjflsjfds843820483048jfdljfsl</p>
</body>
</html>

设置class=bos对象宽度,边框,里面放入连续不断文字和数字内容。如果不设置word-wrap: break-word可以浏览器中观察到本教程文章一开始的第一张图看到连续数字内容不换行超出溢出盒子。

这里给予对象设置word-wrap: break-word强制换行样式。

2、浏览器测试是否换行截图

css实现连续英文字母或数字强制自动换行
div css实现连续英文字母或数字强制自动换行

3、小结
以前老IE浏览器比如IE6不支持,但现在大部分都是有谷歌浏览器,随电脑系统升级都使用更高IE浏览器,或其它品牌浏览器,所以大部分都兼容此内蒙古11选五开奖5号的自动换行属性word-wrap样式,大家可以放心使用。

相关标签: 换行 不换行 强制换行
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/1470.shtml

日期:2017-11-29 15:12:28 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
上一篇:list-style css列表样式属性教程
下一篇:没有了
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 70期:开创了中国人太空“开飞船”历史的刘旺 2019-07-15
  • 纪念人民日报创刊70周年改革开放40周年美术活动 2019-07-07
  • 菜鸟世界杯送出50吨包裹 荷兰成国旗最大购买地菜鸟世界杯送出50吨包裹荷兰成国旗最大购买地-手机行情 2019-07-02
  • [鄙视]就你这智商还挑战爱因斯坦?蚍蜉撼树也! 2019-07-02
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 幸运农场手机安卓 湖北快3专用走势图 黑龙江快乐十分钟开奖走势图 网络ag真人反水规则 天津十一选五直播 北京快中彩奖金 西甲巴萨赛程 加拿大快乐8开奖同步 15选5开奖结果 湖北11选5是什么时候开始 好运快3赚钱是真的吗 山东快乐扑克对子遗漏 欢乐斗地主卡主 广东彩票双色球 东莞福彩中心