你們看,我打中文,超過(guò)塊的寬度,自動(dòng)換行,打英文,超過(guò)塊寬度,直接穿過(guò)邊界繼續(xù)向前,什么原因?
<!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">方法大叔大叔的薩達(dá)撒颯颯大師大師的的</div>
?<div id="div2">啊啊啊撒拉速度來(lái)看了撒倒薩打算的撒的</div>
??? <div id="div2">DFSFSFSDFDSFSDFSDGSDGSDGSDGSDGSGSDGSDGSDGSDGDS</div>
</body>
</html>
2016-08-18
中文是默認(rèn)換行的,阿拉伯?dāng)?shù)字和英文應(yīng)該用word-wrap : break-word ;或者word-break:break-all;實(shí)現(xiàn)強(qiáng)制斷行
2016-08-18
只能采納一個(gè),哈哈
2016-08-18
原因:這是因?yàn)閐iv中,英文字母之間沒(méi)有空格的話,它會(huì)默認(rèn)認(rèn)為這是一個(gè)英文單詞,所以單詞就一次輸出不換行。
解決辦法:在div的style中設(shè)定word-break:break-all;即可實(shí)現(xiàn)自動(dòng)換行。如下:
<div style="word-break:break-all;width:20px“ >現(xiàn)在這里的英文達(dá)到20px長(zhǎng)度就會(huì)自動(dòng)換到下一行了</div>
2016-08-18
id選擇器是唯一的,你第三個(gè)div的id需要改下名字。
連續(xù)的字母或數(shù)字會(huì)導(dǎo)致盒子內(nèi)容溢出,只能添加強(qiáng)制換行的樣式。在第三個(gè)div的樣式里使用word-wrap :break-word ;或者word-break:break-all;
2016-08-18
因?yàn)閐iv中,英文字母之間沒(méi)有空格的話,它會(huì)默認(rèn)認(rèn)為這是一個(gè)英文單詞,所以單詞就一次輸出不換行。
解決辦法:在div的style中設(shè)定word-break:break-all;即可實(shí)現(xiàn)自動(dòng)換行。