HTML 文字超出容器隐藏

CSS, HTML / 2021年6月25日 / hamster

先看示例代码：

<div class="aaa">
    <p>这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子</p>
</div>

<style>
    .aaa{
        width: 200px;
        height:200px;
        border: 1px solid #000;
    }
</style>

效果如下：

现在让文本只显示单行，超出部分隐藏，代码如下：

<div class="aaa">
    <p class="bbb">这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子</p>
</div>

<style>
    .aaa{
        width: 200px;
        height:200px;
        border: 1px solid #000;
    }
    .bbb{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

text-overflow:ellipsis; 超出部分显示省略号

overflow: hidden; 超出部分隐藏

white-space: nowrap; 规定段落中的文本不进行换行

效果如下：

文本只显示单行，超出文本被隐藏。

但若将p标签换成a标签，则效果如下：

为此需要对代码稍作修改：

<div class="aaa">
    <a class="ccc">这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子</a>
</div>

<style>
    .aaa{
        width: 200px;
        height:200px;
        border: 1px solid #000;
    }
    .ccc{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        float: left;
        width: 100px;
    }
</style>

再看效果：

以上只是单行隐藏，如果想多行隐藏，代码如下

<div class="aaa">
    <a class="ddd">这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子这是测试句子</a>
</div>

<style>
    .aaa{
        width: 200px;
        height:200px;
        border: 1px solid #000;
    }
    .ddd{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:3;
        overflow: hidden;
    }
</style>

效果如下：