美文网首页css
css p、div标签内长英文自动换行&长中文不换行

css p、div标签内长英文自动换行&长中文不换行

作者: littlelights | 来源:发表于2017-08-11 11:17 被阅读0次

    长英文换行

    在css中 div,p,h标签等遇到连续的大段英文和数字时候,并不会按照正常情况下自动随盒子宽度限制而自动换行。
    解决办法: word-wrap:break-word
    解释:使用break-word时,是将强制换行。
    参考链接: css word-break

    <div class="demo">
    dsfaskfhsdfljksdhfkjsdhfkjlskflhsdfjkhsdjfkhsdlfkjhsdfsadkljfhsadkjfhskdjsadfasdfsadfsadfasdfsadfsdfsadfsadfsfsdfasfsadfsdf
    </div>  
    
    // css
    .demo {
      width: 200px;
      height: 50px;
      line-height: 50px;
      word-wrap: break-word;
    }
    

    长中文不换行

    有时候碰到某段长中文,不想照正常情况下自动随盒子宽度限制而自动换行。
    解决办法: white-space:nowrap
    解释:使用white-space时,是将强制不换行。
    参考链接: css white-space

    <div class="demo">
    富强、民主、文明、和谐,倡导自由、平等、公正、法治,倡导爱国、敬业、诚信、友善
    </div>  
    
    // css
    .demo {
      width: 200px;
      height: 50px;
      line-height: 50px;
      white-space:nowrap
    }
    

    相关文章

      网友评论

        本文标题:css p、div标签内长英文自动换行&长中文不换行

        本文链接:https://www.haomeiwen.com/subject/smslrxtx.html