CSS實戰篇 - 文字隱藏

時間 2021-08-15

標籤 html 瀏覽器 ide spa code htm blog 圖片欄目 CSS 简体版

原文原文鏈接

一.效果圖

二.相關代碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>文字隱藏</title>
    <style>
        div.elli{
            border:1px solid;
            overflow:hidden;/*內容會被修剪，而且其他內容是不可見的*/
            white-space:nowrap;/*強制在一行顯示*/
            text-overflow:ellipsis;/*顯示省略符號來表明被修剪的文本*/
            width:200px;
            height:20px;
        }
        div.clip
        {
            border:1px solid;
            overflow:hidden; /*超出部分隱藏*/
            white-space:nowrap;/*強制在一行顯示*/
            text-overflow:clip;
            width:200px;
            height:20px;
        }
        div.hide
        {
            overflow:hidden;
            border:1px solid;
            width:200px;
            height:50px;
        }
        div.scroll
        {
            overflow:scroll;/*內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容*/
            border:1px solid;
            width:200px;
            height:50px;
        }

    </style>
</head>
<body>
<h3 style="color: #98bf21">1.多餘文字自動裁剪</h3>
<div class="clip">若是此處的文字較多，將自動裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多餘文字省略號代替</h3>
<div class="elli"><a href="#">若是此處的文字較多，將自動用省略號代替！</a></div>
<br>
<h3 style="color: #98bf21">3.多餘文字自動隱藏</h3>
<div class="hide">若是此處的文字較多，將自動隱藏！若是此處的文字較多，將自動隱藏！若是此處的文字較多，將自動隱藏！若是此處的文字較多，將自動隱藏！若是此處的文字較多，將自動隱藏！</div>
<br>
<h3 style="color: #98bf21">4.多餘文字出現滾動條</h3>
<div class="scroll">若是此處的文字較多，將出現滾動條！若是此處的文字較多，將出現滾動條！若是此處的文字較多，將出現滾動條！</div>
</body>

</html>