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>

CSS实战篇 - 文字隐藏

一.效果图

二.相关代码

三.名词释义

3.1 overflow

3.2 white-space

3.3 text-overflow