CSS基础篇--强制性换行word-break与word-wrap的使用

一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。

所以解决方法（以IE，chrome,FF为测试浏览器）有两种写法：

{word-break:break-all; word-wrap:break-word;}

两种方法的区别说明：

1，word-break:break-all 例如div宽400px，它的内容就会到400px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

html代码：

<div style="width:400px;background:#000;color:#fff;height:100px;margin:0 auto;word-break:break-all; ">congratulation congratulation congratulation congratulation congratulation congratulation
</div>
</br/>
<div style="width:400px;height:100px;background:#000;color:#fff;margin:0 auto;word-wrap:break-word;">congratulation congratulation congratulation congratulation congratulation congratulation
</div>

结果如图所示：

这样就一目了然了。

如果您觉得本文对您的学习有所帮助，请多支持与鼓励。

CSS基础篇--强制性换行word-break与word-wrap的使用相关推荐

CSS阅读笔记---CSS基础篇
本文是这些天阅读慕课网的css基础篇部分所作的笔记. 文章目录一.基本知识二.选择器 1.标签选择器 2.类选择器 3.ID选择器 4.子选择器 5.包含(后代)选择器 6.通用选择器 7.伪类选 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
CSS 基础篇、绝对有你想要
本章内容: 简介 CSS 定义四种引入方式样式应用的顺序选择器(Selector) * 通用元素选择器标签选择器 class 类选择器 # ID选择器 , 多元素选择器后代元素选择器 > ...
整理css基础篇-定位（常规+浮动+定位）
1:常规流 (1)盒模型:规定单个盒子的规则 (2)视觉格式化模型(布局规则):页面中多个盒子排列规则. 视觉格式化模型,大体将页面上盒子排列为三种方式:常规流布局.浮动.定位 1:常规流布局(亦称 ...
CSS基础篇--css reset重置样式有那么重要吗？
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...
Java基础篇：如何使用 break 退出循环
在Java中,break语句有3种作用.第一,你已经看到,在switch语句中,它被用来终止一个语句序列.第二,它能被用来退出一个循环.第三,它能作为一种"先进"的goto 语句 ...
html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

CSS基础篇--强制性换行word-break与word-wrap的使用

CSS基础篇--强制性换行word-break与word-wrap的使用相关推荐

最新文章

热门文章