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

html-css07

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

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

    }

兄弟,正常字符(汉字,或汉字和字母)的换行应该是没什么问题的,\x0d\x0a我估计你的问题是连续的数字和英文字符不换行。\x0d\x0a\x0d\x0a对于div,p等块级元素:\x0d\x0a正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行\x0d\x0ahtml\x0d\x0a正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义\x0d\x0acss\x0d\x0a#wrap{white-space:normalwidth:200px}\x0d\x0a1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word 或者word-break:break-all实现强制断行\x0d\x0a#wrap{word-break:break-allwidth:200px}\x0d\x0a或者\x0d\x0a#wrap{word-wrap:break-wordwidth:200px}\x0d\x0a\x0d\x0a2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条\x0d\x0a#wrap{word-break:break-allwidth:200pxoverflow:auto}