CSS實現標題文字過長部分顯示省略號的方法

時間 2019-11-25

標籤 css 實現標題文字過長部分顯示省略號方法欄目 CSS 简体版

原文原文鏈接

單行效果：html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="cont">
        四歲的弗拉吉米爾在西紅柿上挖了個洞，她用勺子攪了半天，忽然哭了起來。「孩子，怎麼了？爲何哭呢？」媽媽問。「大家都說西紅柿裏有維生素，可我怎麼就找不着呢？」
    </div>
</body>
<style>
* {
    margin: 0px;
    padding: 0px;
    background: #f5f5f5;
}

.cont {
    margin: 50px auto;
    width: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #fff;
}
</style>

</html>

備註：web

主要起做用代碼：app

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行效果：spa

代碼：3d

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    .wrapper {
        width: 400px;
        margin: 50px auto;
        height: auto;
        border: 1px solid #ccc;
        padding: 20px;
    }

    .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    </style>
</head>

<body>
    <div class='wrapper'>
        <p class='text'>【成語故事】宋朝時期，真宗下令訪天下隱者，獲得一個會做詩的杞人楊樸，召見時他卻說不會詩，真宗問他臨行有人做詩送他否？楊樸回答說：""臣妻有詩一首：更休落魄貪杯酒，亦莫猖狂愛詠詩。今朝捉將官裏去，這回斷送老頭皮。""真宗大笑，就放他還山"</p>
    </div>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。