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

我在外面用<pre></pre>把闲置起来的... 我在外面用<pre></pre>把闲置起来的 展开
 我来答
百度网友14dc635
高粉答主

推荐于2019-08-27 · 繁杂信息太多,你要学会辨别
知道答主
回答量:145
采纳率:100%
帮助的人:5.5万
展开全部

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

分析如下:

html

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

css

#wrap{white-space:normal; width:200px; }

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

#wrap{word-break:break-all; width:200px;}或者#wrap{word-wrap:break-word; width:200px;}

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

#wrap{word-break:break-all; width:200px; overflow:auto;}

扩展资料:

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

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

编程工具

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

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

工作原理

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

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

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

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

走近植物世界
高粉答主

推荐于2019-10-06 · 关注我不会让你失望
知道答主
回答量:461
采纳率:0%
帮助的人:12.2万
展开全部

如果DIV定义的宽度,当文本超过这个宽度时就会自动换行。自动换行:div{ word-wrap: break-word; word-break: normal;}

如果是是连续的数字和英文字符换行,则如下: 

div强制换行

(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }

或者

#wrap{word-break:break-all;width:200px;}

(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;

同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!

#wrap{white-space:normal; width:200px; overflow:auto;}

或者

#wrap{word-break:break-all;width:200px; overflow:auto; }

强制英文单词断行:

div{word-break:break-all;}

css代码如下:

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行

扩展资料:

css小知识点集锦

子元素文字始终居中

div{ width:300px; height:300px;border:1px solid red; }

p{ height:300px; display:table-cell; verticle-align:middle; }

盒子水平、垂直居中

CSS3写法

display: flex;

justify-content: center; /* horizontal centering */

align-items: center; /* vertical centering */

普通写法 //不支持IE6,IE7

display: table-cell;

vertical-align: middle;

给定宽度,内部文字,元素平均分布

display: flex;//父盒子

justify-content: space-around/space-between;//父盒子

文字显示第N行之后变成…显示

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行

-webkit-box-orient: vertical;

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
xnlpktg
推荐于2017-12-16 · TA获得超过388个赞
知道小有建树答主
回答量:212
采纳率:0%
帮助的人:208万
展开全部
兄弟,正常字符(汉字,或汉字和字母)的换行应该是没什么问题的,
我估计你的问题是连续的数字和英文字符不换行。

对于div,p等块级元素:
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义
css
#wrap{white-space:normal; width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
赤洛洛
2010-11-20 · 超过10用户采纳过TA的回答
知道答主
回答量:34
采纳率:0%
帮助的人:28.6万
展开全部
如果DIV定义的宽度,当文本超过这个宽度时就会自动换行。不知你为何会有此疑惑,你的问题问得不是很清楚。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式