内容超出div宽度后自动换行的css代码

html-css05

内容超出div宽度后自动换行的css代码,第1张

使用一段css代码:”word-wrap:break-wordword-break:break-alloverflow:hidden“。

实例演示如下:

1、设计两个容器,放入一些文字,代码如下:

此时的页面展示如下:(均为换行)

2、修改两个容器的样式,给第一个容器加上了关键代码如下:

此时的页面展示(第一个已经换行):

扩展资料:

css详解:

一、word-wrap:normal|break-word(word-wrap属性允许长单词或URL地址换行到下一行)。

1、normal,只在允许的断字点换行(浏览器保持默认处理,默认值)。

2、break-word,在长单词或URL地址内部进行换行。

二、word-break:normal|break-all|keep-all(通过使用word-break属性,可以让浏览器实现在任意位置的换行)。

1、normal使用浏览器默认的换行规则。(默认值)

2、break-all允许在单词内换行。

3、keep-all只能在半角空格或连字符处换行。

给放文本的元素设置宽度width:Xpx它就会自动换行。再添加text-align:center即可文本居中显示。

<div style="width:300pxtext-align:centerborder:0.5px solid red">

<p>文本居中</p>

</div>

一般你这种自动换行是因为宽度不够引起的,dw设计视图预览窗口解析引擎和其他浏览器不一样,就像ie、火狐、谷歌、欧朋等浏览器引擎不一样是一个意思,所以还是要以各个浏览器显示效果标准为目标,不要看dw显示效果。当然,如果你css写的规范,显示效果也是一样的。

另外,背景图铺满要用到一个css3属性 background-size:100% 100%但是这样强制拉升会让背景图变形。