div+css中怎样实现文字自动换行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div+css中怎样实现文字自动换行相关的知识,希望对你有一定的参考价值。

亲,给要换行的文字后面加上<br/>标签就可以实现文字的自动换行了 参考技术A div定义宽度,文字会自动换行。如果是数字或者是英文字母的话一般不会自动换行。用word-wrap:break-word;实现强制断行。或者用overflow:hidden 把超出边界的字符隐藏 参考技术B 这里给你一个地址.可以去看看针对不同浏览器的不同设置方法.
DIV+CSS最主要的是解决各浏览器之间的BUG

http://www.blueidea.com/tech/web/2006/3469.asp

希望对你有所用本回答被提问者采纳
参考技术C CSS代码:#wrapwhite-space:normal; width:200px;
或者
#wrapword-break:break-all;width:200px;
DIV代码:<div >ddd1111111111111111111111111111111111</div>

效果:文字自动换行。
word-break:break-all;代码起主要作用,如果没有这段代码,超出部分会自动隐藏掉,对用户体验很不好。
参考技术D 纯div css的话不好自动换行吧
最多可以超过隐藏 overflow:hidden

css强制不换行

参考技术A

css强制不换行:

white-space: nowrap;


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

body

background-color: #00FFFF;

div

width: 300px;

white-space: nowrap;

background-color: #007AFF;

color: #FFFFFF;

</style>

</head>

<body>

<div>

AAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCC

DDDDDDDDDDDDDDDDDDDDDDDDDDDD

</div>

</body>

</html>

以上是关于div+css中怎样实现文字自动换行的主要内容,如果未能解决你的问题,请参考以下文章

怎样让css控制文字禁止换行/强制不换行?

div里面文字不自动换行

怎么让DIV里面的文字自动换行

css设置div自动换行wordwrap没有效果

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

css实现强制不换行/自动换行/强制换行