文本溢出

最新推荐文章于 2023-05-18 14:54:51 发布
房东的喵
最新推荐文章于 2023-05-18 14:54:51 发布
阅读量177
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/luxunlx123/article/details/105844226
版权
前端专栏收录该内容
30 篇文章 0 订阅
订阅专栏
1.overflow属性：定义溢出元素内容区的内容会如何处理

语法：{overflow：visible/hidden/scroll/inherit；}
说明：
visible：默认值，内容不会被修剪，会出现在元素框之外
hidden：内容会被修改，并且其余内容是不可见的
scroll：内容会被修改，但浏览器会显示滚动条，以便查看其余的内容
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容
inherit：规定应该从父元素继承overflow属性值

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box {width: 200px; height: 300px; border: 1px #000 solid;float: left;margin-left: 20px;}
        .vi {overflow: visible;}
        .hi {overflow: hidden;}
        .sc {overflow: scroll;}
        .au {overflow: auto;}
        .box_zi {width: 150px;height: 200px;border: 1px #f00 solid;}
        .in {overflow: inherit;}
        </style>
    </head>
    <body>
        <div class="box">
            西安邮电大学（Xi’an University of Posts & Telecommunications）简称西邮、西安邮电，
            是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。
        </div>
        <div class="box vi">西安邮电大学（Xi’an University of Posts & Telecommunications）简称西邮、西安邮电，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        <div class="box hi">西安邮电大学（Xi’an University of Posts & Telecommunications）简称西邮、西安邮电，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        <div class="box sc">西安邮电大学（Xi’an University of Posts & Telecommunications）简称西邮、西安邮电，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        <div class="box au">西安邮电大学（Xi’an University of Posts & Telecommunications）简称西邮、西安邮电，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        <div class="box au">
            <div class="box_zi in">西安邮电大学（Xi’an University of Posts & Telecommunications）简称西邮、西安邮电，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        </div>
        
    </body>
</html>

2.white-space属性：设置如何处理元素内的空白

语法：{white-space: normal/ pre/nowrap/pre-wrap/pre-line/inherit;}

说明：
normal：默认。空白会被浏览器忽略
pre：空白会被浏览器保存
nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止
pre-wrap：保留空白符序列，但是正常的进行换行
pre-line：合并空白符序列，但是保留换行符
inherit：规定应该从父元素继承white-space属性的值
 
例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box {width: 500px; height: 300px;border: #f00 solid 1px;}
         p {width: 250px; border: #000  1px solid;}
         .no {white-space: normal;}
         .pre {white-space: pre;}
         .nowrap {white-space: nowrap;}
         .pre-wrap {white-space: pre-wrap;}
         .pre-line {white-space: pre-line;}
         .in {white-space: inherit;}
        </style>
    </head>
    <body>
        <p>
            铸星龙王：
            指尖星火      请君共赏
            整个宇宙      邀你共舞
        </p>
        <p class="no">
            铸星龙王：
            指尖星火      请君共赏
            整个宇宙      邀你共舞
        </p>
        <p class="pre">
            铸星龙王：
            指尖星火      请君共赏
            整个宇宙      邀你共舞
        </p>
        <p class="nowrap">
            铸星龙王：<br>
            指尖星火      请君共赏<br>
            整个宇宙      邀你共舞
        </p>
        <p class="pre-wrap">
            铸星龙王：
            指尖星火      请君共赏
            整个宇宙      邀你共舞
        </p>
        <p class="pre-line"> 
            铸星龙王：
            指尖星火      请君共赏
            整个宇宙      邀你共舞
        </p>
        <div class="box nowrap">
            <p class="in">
                铸星龙王：
                指尖星火      请君共赏
                整个宇宙      邀你共舞
            </p>
        </div>
    </body>
</html>

3.text-overflow属性：规定当文本溢出包含元素时发生的事情
语法：{text-overflow：clip/ellipsis}
说明：
clip：不显示省略号，而是简单的裁切
ellipsis：当对象内文本溢出时，显示省略标记

要实现溢出时产生省略号的效果还需定义：
1.容器宽度： width：value；（px、%，都可以）
2.强制文本在一行内显示：white-space：nowrap；
3.溢出内容为隐藏：overflow：hidden
4.溢出文本显示省略号：text-overflow：ellipsis；

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box {width: 600px;border: #000 1px solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        .uu li {width: 600px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
        background: url(7.jpg) no-repeat left 50%; padding-left:50px;}
        </style>
    </head>
    <body>
        <div class="box">
            西安邮电大学（Xi’an University of Posts &amp; Telecommunications）简称“西邮”，
            位于世界历史名城古都西安，创建于1950年，
            是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、长安联盟成员、中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。 学校前身是1950年成立的陕西和甘肃两省邮电人员训练班及随后的西安邮电学校。1959年经国务院批准设立西安邮电学院，是国家在西北地区布局的唯一邮电通信类普通高校。2000年划归陕西省，实行中央与地方共建，以陕西省管理为主的管理体制。2012年3月，经教育部批准更名为西安邮电大学。
        </div>
        <ul class="uu">
            <li>西安邮电大学（Xi’an University of Posts &amp; Telecommunications）简称“西邮”</li>
            <li>西安邮电大学（Xi’an University of Posts &amp; Telecommunications）简称“西邮”</li>
            <li>西安邮电大学（Xi’an University of Posts &amp; Telecommunications）简称“西邮”</li>
            <li>西安邮电大学（Xi’an University of Posts &amp; Telecommunications）简称“西邮”</li>
        </ul>
    </body>
</html>
房东的喵
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本溢出

1.overflow属性：定义溢出元素内容区的内容会如何处理语法：{overflow：visible/hidden/scroll/inherit；}说明：visible：默认值，内容不会被修剪，会出现在元素框之外hidden：内容会被修改，并且其余内容是不可见的scroll：内容会被修改，但浏览器会显示滚动条，以便查看其余的内容auto：如果内容被修剪，则浏览器会显示滚动条，以便查看...
复制链接

扫一扫