你们看，我打中文，超过块的宽度，自动换行，打英文，超过块宽度，直接穿过边界继续向前，什么原因？-慕课网

你们看，我打中文，超过块的宽度，自动换行，打英文，超过块宽度，直接穿过边界继续向前，什么原因？

来源：13-7 相对于自己的位置-层模型之相对定位

bookmark

2016-08-18 22:12

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div2{
    width:200px;
    height:200px;
    border:2px dotted green;
    display:inline-block;
    position:relative;
    left:0px;
    top:0px;
}
#div1{
    width:200px;
    height:200px;
border:2px red solid;
position:relative;
    left:0px;
    top:0px;
    display:inline-block;
}
</style>
</head>
<body>
    <div id="div1">方法大叔大叔的萨达撒飒飒大师大师的的</div>
<div id="div2">啊啊啊撒拉速度来看了撒倒萨打算的撒的</div>
    <div id="div2">DFSFSFSDFDSFSDFSDGSDGSDGSDGSDGSGSDGSDGSDGSDGDS</div>
</body>
</html>

写回答关注

5回答

qq_乱世流年谁许谁地老天荒_03829045

2016-08-18 22:24:01

已采纳

中文是默认换行的，阿拉伯数字和英文应该用word-wrap : break-word ;或者word-break:break-all;实现强制断行

0 0
bookmark

2016-08-18 22:30:38

只能采纳一个，哈哈

0 0
Rajans

2016-08-18 22:29:28

原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。
解决办法：在div的style中设定word-break:break-all;即可实现自动换行。如下：
<div style="word-break:break-all;width:20px“ >现在这里的英文达到20px长度就会自动换到下一行了</div>

0 0
谢尔顿的发际线

2016-08-18 22:27:10
1. id选择器是唯一的，你第三个div的id需要改下名字。
2. 连续的字母或数字会导致盒子内容溢出，只能添加强制换行的样式。在第三个div的样式里使用word-wrap :break-word ;或者word-break:break-all;
0 0
慕粉3810809

2016-08-18 22:24:29

因为div中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。
解决办法：在div的style中设定word-break:break-all;即可实现自动换行。

0 0