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

html-css015

内容超出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只能在半角空格或连字符处换行。

<div class="main"><div class="left"></div><div class="center"></div><div class="right"></div><div class="cle"></div></div><style type="text/css">.main {width:1000pxmargin:0 auto}.left {width:245pxfloat:left}.center {width:435pxfloat:leftmargin-left:10px}.right {width:300pxfloat:right}.cle {height:0clear:both}</style>正常情况中间是要定宽度的，特殊手段还是做到不定宽度的，注意：center、left和right的总宽度+他们的margin不能大于main的宽度。

css自适应宽度有2种方式：

1.是通过百分比来控制宽度；

2.可以通过块状元素自动占满父级的宽度的特性来实现

PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。