zoukankan      html  css  js  c++  java

  • 【css】 css中换行

    容易混淆的几个换行属性

    • word-break:break-all；/* 单词内换行 */
    • word-wrap:break-word;/* 以单词/网址/换行 */
    • white-space:pre-wrap;/* 保留空白 */
    • white-space:nowrap;    /* 不换行 */
    <!DOCTYPE html>
<html>
<head>
<style> 
.wrap{
    width:11em; 
    border:1px solid #000000;
}

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

p.test2{    
    word-break:break-all;
}
p.test3{
    white-space:pre-wrap;
}
p.test4{
    white-space:nowrap;
}
</style>
</head>
<body>

<p class="wrap test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="wrap test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="wrap test3">
    <b>注释：</b>
    目前 Opera 不支持 word-break 属性。

</p>
<p class="wrap test4">
    <b>注释：</b>
    目前 Opera 不支持 word-break 属性。

</p>

</body>
</html>
    View Code

    效果图

     

     
  • 相关阅读:
    例7-13
    例7-11
    例7-1
    例6-5
    例6-3
    例6-2
    例6-1
    例5-9
    例5-8
    例5-7
  • 原文地址：https://www.cnblogs.com/websmile/p/12620842.html
Copyright © 2011-2022 走看看