HTML怎么到多少像素换行,css怎么设置换行？

在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。

css设置换行的方法：

1、使用word-break: break-all设置换行。

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

语法：word-break: normal|break-all|keep-all;

示例：

p.test1

{

width:11em;

border:1px solid #000000;

word-break:hyphenate;

}

p.test2

{

width:11em;

border:1px solid #000000;

word-break:break-all;

}

This is a veryveryveryveryveryveryveryveryveryvery long paragraph.

This is a veryveryveryveryveryveryveryveryveryvery long paragraph.

注释：目前 Opera 不支持 word-break 属性。

效果图：

2、使用overflow-wrap: break-word设置换行。

overflow-wrap属性：

语法：

overflow-wrap：normal | break-word

默认值：normal

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

相关属性： ||

取值：

normal：允许内容顶开或溢出指定的容器边界。

break-word：内容在边界内换行。如果需要，单词内部允许断行。

说明：

设置或检索当内容超过指定容器的边界时是否断行。CSS3中将 改名为 ；

由于历史原因，当你使用 时，最好同时使用 作为备选，作向前兼容。

对应的脚本特性为overflowWrap。

示例：

.test p{width:100px;border:1px solid #000;background-color:#eee;}

.normal p{word-wrap:normal;overflow-wrap:normal;}

.break-word p{word-wrap:break-word;overflow-wrap:break-word;}

• normal：

  aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn

• break-word：

  aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn

• break-word：

  中英混排的时候abcdefghijklmnopqrst

效果图：