<!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 </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; 自动换行
扫一扫
1337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
