用DIV+CSS中如何设置,超出就自动换行输出。

html-css022

用DIV+CSS中如何设置,超出就自动换行输出。,第1张

{white-space:normal}当定义的宽度之后自动换行

分析如下:

html

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

css

#wrap{white-space:normalwidth:200px}

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word 或者word-break:break-all实现强制断行

#wrap{word-break:break-allwidth:200px}或者#wrap{word-wrap:break-wordwidth:200px}

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

#wrap{word-break:break-allwidth:200pxoverflow:auto}

扩展资料:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

编程工具

记事本:使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时,以.html为后缀名进行保存即可。

Dreamweaver:它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出充满动感的网页。

工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。

参考资料来源:百度百科:CSS (层叠样式表)

css换行属性:语法:word-wrap

:

normal

|

break-word

取值:normal

: 

默认值。允许内容顶开指定的容器边界

break-word

: 

内容将在边界内换行。如果需要,词内换行(

word-break

)也将发生

说明:设置或检索当当前行超过指定容器的边界时是否断开转行。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的

height

width

属性,或者设定

position

属性为

absolute

,或者设定

display

属性为

block

。此属性对于

currentStyle

对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为

wordWrap

示例:div

<head

runat="server">

<title>无标题页</title><style

type="text/css"><!--div

--></style></head>然后

属性调用CssClass="div"

www.661uc.com

www.833uc.com

www.776f.com

www.771uc.com

www.995uc.com

www.881uc.com

www.773uc.com

www.993f.com

www.993uc.com

www.116uc.com

www.991uc.com

www.337uc.com

www.717uc.com

www.113uc.com

www.199gg.com

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

    }