动态长度中英字符串显示至固定高度td

w

为td中英字符串区域设置为display:block; height=td_height,并指明td width。

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style>
    table, tr, td {
        border: 1px solid #000000;
        border-spacing: 0;
    }

    table {
        width: 160px;
    }

    td {
        width: 50px;
        height: 60px;;
        overflow: hidden;
    }

    span {
        display: block;
        height: 60px;;
        text-overflow: ellipsis;
    }
</style>
<table>
    <tr>
        <td><span>西瓜(学名:Citrullus lanatus (Thunb.) Matsum. et Nakai)一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗壮,具短柔毛,叶柄粗,密被柔毛;叶片纸质,轮廓三角状卵形,带白绿色,两面具短硬毛,叶片基部心形。雌雄同株。雌、雄花均单生于叶腋。雄花花梗长3-4厘米,密被黄褐色长柔毛;花萼筒宽钟形;花冠淡黄色;雄蕊近离生,花丝短,药室折曲。雌花:花萼和花冠与雄花同;子房卵形,柱头肾形。果实大型,近于球形或椭圆形,肉质,多汁,果皮光滑,色泽及纹饰各式。种子多数,卵形,黑色、红色,两面平滑,基部钝圆,通常边缘稍拱起,花果期夏季。</span>
        </td>
        <td>1232</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style>
    table, tr, td {
        border: 1px solid #000000;
        border-spacing: 0;
    }

    table {
        width: 160px;
    }

    td {
        width: 50px;
        height: 60px;;
        overflow: hidden;
    }

    div {
        height: 60px;;
        text-overflow: ellipsis;
    }
</style>
<table>
    <tr>
        <td>
            <div>西瓜(学名:Citrullus lanatus (Thunb.) Matsum. et
                Nakai)一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗壮,具短柔毛,叶柄粗,密被柔毛;叶片纸质,轮廓三角状卵形,带白绿色,两面具短硬毛,叶片基部心形。雌雄同株。雌、雄花均单生于叶腋。雄花花梗长3-4厘米,密被黄褐色长柔毛;花萼筒宽钟形;花冠淡黄色;雄蕊近离生,花丝短,药室折曲。雌花:花萼和花冠与雄花同;子房卵形,柱头肾形。果实大型,近于球形或椭圆形,肉质,多汁,果皮光滑,色泽及纹饰各式。种子多数,卵形,黑色、红色,两面平滑,基部钝圆,通常边缘稍拱起,花果期夏季。
            </div>
        </td>
        <td>1232</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

 

 

posted @ 2017-03-09 09:32  papering  阅读(227)  评论(0编辑  收藏  举报