为了账号安全,请及时绑定邮箱和手机立即绑定

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

<!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 回答

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

0 回复 有任何疑惑可以回复我~

只能采纳一个,哈哈

0 回复 有任何疑惑可以回复我~

原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行。

解决办法:在div的style中设定word-break:break-all;即可实现自动换行。如下:

<div style="word-break:break-all;width:20px“ >现在这里的英文达到20px长度就会自动换到下一行了</div>

0 回复 有任何疑惑可以回复我~
  1. id选择器是唯一的,你第三个div的id需要改下名字。

  2. 连续的字母或数字会导致盒子内容溢出,只能添加强制换行的样式。在第三个div的样式里使用word-wrap :break-word ;或者word-break:break-all;

0 回复 有任何疑惑可以回复我~

因为div中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行。

解决办法:在div的style中设定word-break:break-all;即可实现自动换行。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信