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


    <!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; 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;    自动换行
  • 相关阅读:
    蛋糕切割【数论,数学】
    【洛谷P1082】同余方程【扩欧】
    【洛谷P4003】无限之环【费用流】
    【洛谷P4503】企鹅QQ【字符串hash】
    【洛谷P3084】照片Photo【单调队列dp】
    【洛谷P2286】宠物收养场【Treap】
    POJ 3984 迷宫问题
    牛客IOI周赛19-普及组题解
    UVA 11624 Fire!
    FZU 2150 Fire Game
  • 原文地址:https://www.cnblogs.com/enych/p/9489070.html
Copyright © 2020-2023  润新知