文本元素溢出隐藏

最新推荐文章于 2024-06-24 12:39:25 发布

楠汐江

最新推荐文章于 2024-06-24 12:39:25 发布

阅读量390

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/jiayuannan/article/details/105647135

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS处理文本溢出隐藏的问题，包括单行和多行文本的处理方法。通过设置固定宽度、overflow: hidden、text-overflow: ellipsis等属性，可以实现自动隐藏多余内容并显示省略号的效果。示例中展示了具体的应用场景。

摘要由CSDN通过智能技术生成

文本元素溢出隐藏

文章由自己的学习历程总结而来，仅供大家参考，欢迎大家交流学习。

在做页面的过程中，经常会遇到新闻标题的隐藏效果，在没有学习溢出效果隐藏之前，总是手动输入省略号来代表省略部分的内容，但是对于具有变化性质的网页内容来说，这一点是不可取的，还是需要通过css来实现自动隐藏多余内容的效果

单行文本溢出隐藏

1.给内容设置固定宽度，如果超出的文本则设置以下隐藏效果
2.首先，设置内容强制不换行

white-space     设置内容空白空间的处理
	 pre         强制内容不换行，多个空格可以识别
	 nowrap      强制内容不换行，只识别一个空格
	 normal      默认值，浏览器默认效果，自动换行，空格只能识别一个
	 pre-wrap    自动换行，识别多个空格
	 pre-line    跟normal一样，只识别一个空格，可识别换行

3.其次使用overflow: hidden;将超出的内容隐藏

overflow   设置元素溢出内容设置
	    visible     默认值(没有效果)
        hidden      溢出隐藏
        auto        溢出变成滚动条
        scroll      溢出变成滚动条,不管内容有没有超出滚动条都显示

延伸：overflow-x和overflow-y默认值是auto,两者同时存在的效果与hidden效果
一样，单设置一个会出现滚动条

4.最后使用text-overflow:ellipsis;把隐藏内容设置为省略号

text-overflow   设置隐藏内容
	 clip        裁剪隐藏内容，默认值
	 ellipsis    设置隐藏内容变成省略号

案例demo

在一个宽高各为100像素的文本框内输入“湖北省新型冠状病毒感染肺炎疫情防控指挥部通告”，令超出的内容用省略号代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
        	/* 1.设置范围(给内容设置固定宽度)*/
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            margin: 100px auto;
            /*2.内容强制不换行*/
            white-space: nowrap;
            /*3.超出的内容隐藏，overflow: hidden;*/
            overflow: hidden;
            /*4.把隐藏内容设置为省略号*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        湖北省新型冠状病毒感染肺炎疫情防控指挥部通告
    </div>
</body>
</html>

多行文本溢出隐藏

多行文本的溢出隐藏不经常使用，1.兼容性差；2.使用不灵活。因此在设置中不常用，这里只是作为了解

1.display:-webkit-box;(必用属性，将内容作为弹性盒模型显示)
2.-webkit-box-orient:vertical; (必用属性，设置盒子排列方式:垂直显示)
3.-webkit-line-ciamp:数值;(显示的行数)
4.overflow: hidden;

案例demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            border: 5px solid #000;
            margin: 100px auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /*-webkit-line-clamp: 2;表示在那一行出现省略号*/
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
       一、高考时间安排：教育部2020年3月31日公告，2020年全国普通高等学校招生统一考试（以下简称高考）延期一个月举行，考试时间为7月7日至8日。根据教育部公告要求，经综合研判、审慎研究并商教育部同意，湖北省2020年高考时间为7月7日至8日。具体科目考试时间安排为：7月7日，语文9:00至11:30；数学15:00至17:00。7月8日，文科综合/理科综合9:00至11:30；外语15:00至17:00。
    </div>
</body>
</html>