HTML DIV中文字自动换行 , 顶部对齐

时间：2024-09-26 22:04:26
<!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 中使用,

    1. word-wrap: break-word;
    2. word-break: break-all;    自动换行

相关文章