css文字强制换行的方法,用word-wrap属性
在默认情况下,如果文本的内容超过某个div块的宽度的话,就会发生自动换行,因为div块的white-space属性的默认值是normal。但是也有两种情况:
1、如果div块里是一串的文字内容,那么到了div块的width限制时,会自动换行。
2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了,而是直接溢出div块。这时就要考虑css文字强制换行了。
那CSS样式怎么控制文字的强制换行?
这时候我们需要用到word-wrap属性,还有一个属性word-break也能够解决换行问题,但是它的浏览器兼容性不好,并且还有可能导致其他问题,所以这里不建议使用。
word-wrap的break-word属性值可以导致换行,一般说来如果一个单词比较长的话,行末的空间不足以容纳这个单词就会产生换行,而不是将一个单词截断,word-break的break-all属性值可以截断一个单词
<style type="text/css">.first
{
width:120px
height:60px
border:1px solid blue
word-wrap:break-word
}
.second
{
width:120px
height:60px
border:1px solid red
word-break:break-all
}
需要准备的材料分别有:电脑、chrome浏览器、html编辑器。
1、首先,打开html编辑器,新建一个html文件,例如:index.html。
2、其次,在index.html中的<style>标签中,输入css样式代码:body {background: url(image7.jpg) no-repeatbackground-size: 250px}。
3、最后,浏览器运行index.html页面,此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。