td下的div超出隐藏并居中

weixin_30847271

于 2018-07-31 11:04:00 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/9608kai/p/9394750.html

版权

<!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%);
*/用定位上下左右居中

转载于:https://www.cnblogs.com/9608kai/p/9394750.html

weixin_30847271

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
td下的div超出隐藏并居中

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>父元素高度确定的多行文本</title> <style> </style></head><body&gt...
复制链接

扫一扫