zoukankan      html  css  js  c++  java
  • 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 ^_*`

  • 相关阅读:
    codeforces
    codeforces
    HDU
    poj
    poj
    HDU Problem
    HDU 3555 Bomb 【数位dp】
    POJ 1942 Paths on a Grid【组合数学】
    杭电 Problem 2089 不要62 【数位dp】
    codeforces 486c-Palindrome Transformation【贪心】
  • 原文地址:https://www.cnblogs.com/chuanzi/p/10543413.html
Copyright © 2011-2022 走看看