zoukankan      html  css  js  c++  java
  • 动态长度中英字符串显示至固定高度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>

  • 相关阅读:
    LeetCode 79. 单词搜索
    LeetCode 1143. 最长公共子序列
    LeetCode 55. 跳跃游戏
    LeetCode 48. 旋转图像
    LeetCode 93. 复原 IP 地址
    LeetCode 456. 132模式
    LeetCode 341. 扁平化嵌套列表迭代器
    LeetCode 73. 矩阵置零
    LeetCode 47. 全排列 II
    LeetCode 46. 全排列
  • 原文地址:https://www.cnblogs.com/rsapaper/p/6524060.html
Copyright © 2011-2022 走看看