CSS3解決連續英文字符或數字不能自動換行的問題


在開發中可能會遇到連續英文字符或數字超出容器邊界的問題,如

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
    .ch{ 
        width:150px; 
        height:1OOpx;
        border:1px solid blue; 
        margin-top:5px;
    }
    .en{ 
        width:150px;
        height:1OOpx; 
        border:1px solid blue;
        margin-top:5px;
    }
</style>
</head>
<body>
<div class="ch">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</div>
<div class="en">Because I'm a programmer, bug fixing is a common practice.3.1415926579blblblblblblblblblblblb</div>
</body>
</html>

效果圖:

可以看到,正常的中文和英文單詞是可以正常換行的,為了解決后面的連續數字或英文字符溢出的現象,可以給en類加上word-wrap: break-word;樣式

.en{ 
    width:150px;
    height:1OOpx; 
    border:1px solid blue;
    margin-top:5px;
    word-wrap: break-word;
}

效果圖:

end ^_*`

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM