先看测试代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
#tr1{
display:block;
width:547px;
height:33px;
border-bottom:1px dashed #C9C9C9;
}
#td1{
padding:0px;
<!--display:inline-block;
line-height:28px;
overflow:hidden;-->
vertical-align:top;
width:476px;
height:33px;
font-size:14px;
}
#td2{
padding:0px;
<!--display:inline-block;-->
vertical-align:top;
width:66px;
height:33px;
font-size:14px;
text-align:center;
line-height:25px;
}
#a1{
font-size:14px;
text-decoration:none;
}
</style>
</head>
<body>
<table>
<tr id="tr1">
<td id="td1">
·
<a id="a1">关于推荐我校2017年度宝钢教育奖优秀教师特等奖人选、优秀教师奖人选的公示</a>
</td>
<td id="td2">
[18-09-04]
</td>
<tr>
</table>
</body>
</html>
效果图:
因为<td>标签中文字超出自动换行,导致这个tr的格式很不好看
我们的目的:<td>标签中文本超出部分隐
1.我首先尝试的是overflow:hidden属性.当我给<td id="td1">中加上overflow:hidden属性时,发现结果并未发生任何改变。
这是因为并未满足overflow:hidden溢出条件
overflow:hidden溢出条件:https://blog.csdn.net/csdn_zsdf/article/details/72871357
2.我选择用display属性将其视为块级元素。但是不用display:block,因为一个普通块独占一行。所以我使用display:inline-block属性,使之成为行内块元素,自动成行排列。但是一定要用vertical-align:top保持顶端对齐(默认对齐方式不为顶端对齐)。
3.使td成为块级元素后,给<td id="td1">中加上overflow:hidden属性.
此时效果:
此时的overflow属性是起了作用的!
若没有overflow属性,效果图:
4.我们使用line-height属性将td中文本下移(行高line-height,行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响) 例如:我们加上line-height:28px;
效果图:
最终代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
#tr1{
display:block;
width:547px;
height:33px;
border-bottom:1px dashed #C9C9C9;
}
#td1{
padding:0px;
display:inline-block;
overflow:hidden;
vertical-align:top;
width:476px;
height:33px;
font-size:14px;
line-height:28px;
}
#td2{
padding:0px;
display:inline-block;
vertical-align:top;
width:66px;
height:33px;
font-size:14px;
text-align:center;
line-height:25px;
}
#a1{
font-size:14px;
text-decoration:none;
}
</style>
</head>
<body>
<table>
<tr id="tr1">
<td id="td1">
·
<a id="a1">关于推荐我校2017年度宝钢教育奖优秀教师特等奖人选、优秀教师奖人选的公示</a>
</td>
<td id="td2">
[18-09-04]
</td>
<tr>
</table>
</body>
</html>