HTML DIV中文字自動換行 , 頂部對齊

本文轉載自查看原文 2018-08-16 18:29 6744 test

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>demo</title>
        <style type="text/css">
            .box {
                position: relative;
                width: 500px;
                height: 300px;
                border: 1px solid #FFF;
                background-color: #999;
                display: table;
            }
            
            .wrap{
                display: table-cell;
                vertical-align: middle;    
                *position:absolute;
                *top: 50%;
                *left: 0;
            }
            
            .content {
                *position: relative;
                *top: -50%;
                *left: 0;
            }          
            
        </style>
    </head>
    <body>
 <div>
     <table>
         <tr>
             <!-- div中文字自動換行--->
             <td><div style="word-wrap:break-word;word-break:break-all;padding-left: 5px;width: 150px;"><span>@item[0000000000000000000000000000000000000000000000000000i].Column6 &nbsp;</span></div></td>
         </tr>
     </table>
 </div>
        <div class="box">
            <div class="wrap">
                <p class="content">
                    我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行
                    固定寬度的文字自動換行並垂直劇中">固定寬度的文字自動換行並垂直劇中</a>
                </p>
            </div>
        </div>
        <div class="box">
 
            <div class="wrap">
                <p class="content">
                    是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行我是文字隨便幾行
                </p>
            </div>
        </div>
    </body>
</html>

文字頂部對齊

vertical-align: top; 在 table 中使用,

word-wrap: break-word;
word-break: break-all; 自動換行

免責聲明！

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

猜您在找 CSS 之 div中文字超出時自動換行 css-div中文字過多（內容超出div寬度）后自動換行 Css文字在div中自動換行讓DIV中文字換行顯示 DIV中文字換行顯示 DIV布局-高度不同DIV，自動換行並對齊 Xib設置label自動換行和Label的頂部對齊 HTML中顯示的文字自動換行 DIV的內容自動換行解決html頁面英文和數字不自動換行，但中文就可以自動換行