td下的div超出隐藏并居中 

<!DOCTYPE HTML>
<html>
<head>
    <meta  charset="utf-8">
    <title>父元素高度确定的多行文本</title>
    <style>

    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            <div style="height:100px;width:100px;overflow:hidden;word-break: break-all;position: relative;">
              <div style="width:75%;position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);text-align: left;">11111111111111111111111111111111111</div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

/*常见的超出隐藏与居中的一种*/
/*
overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; //火狐与ie不支持适用于手机端
*/超出两行显示...
/*
position: absolute; 
left:50%;
top:50%
transform: translate(-50%, -50%);
*/用定位上下左右居中

 

posted @ 2018-07-31 11:04  前端凯凯  阅读(284)  评论(0)  编辑  收藏  举报