css总结（7）

最新推荐文章于 2024-05-27 00:00:00 发布

weixin_43821488

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/weixin_43821488/article/details/104441096

版权

css总结（7）

文字溢出处理

单行省略

单行文本三件套

white-space:nowrap; 断行处理：无断行

overflow:hidden;溢出处理：隐藏

text-overflow:ellipsis;文字溢出处理：省略号

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        p{
            width:300px;
			height:20px;
			line-height:20px;
			border:1px  solid black;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
        }
    </style>
</head>
<body>
        <p>当地时间21日，意大利北部地区共新增17例新冠病毒肺炎感染病例，至少9座城市下令关闭学校酒吧等公共场所，为期一周。其中，一位威尼托大区确诊的78岁男性在帕多瓦死亡，为意大利境内首例新冠肺炎死亡病例。</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZmeomNcA-1582342965433)(C:\Users\DANA\Desktop\001.PNG)]$

多行省略

做截断处理（溢出部分隐藏）

overflow:hidden;溢出处理：隐藏

注意：要算好文字的行高和容器的高度。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        p{
            width:300px;
			height:60px;
			line-height:20px;
			border:1px  solid black;
			overflow:hidden;
        }
    </style>
</head>
<body>
        <p>当地时间21日，意大利北部地区共新增17例新冠病毒肺炎感染病例，至少9座城市下令关闭学校酒吧等公共场所，为期一周。其中，一位威尼托大区确诊的78岁男性在帕多瓦死亡，为意大利境内首例新冠肺炎死亡病例。</p>
</body>
</html>

场所，为期一周。其中，一位威尼托大区确诊的78岁男性在帕多瓦死亡，为意大利境内首例新冠肺炎死亡病例。

```

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pulVGQN8-1582342965434)(C:\Users\DANA\Desktop\002.PNG)]$

weixin_43821488

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css总结（7）

css总结（7）文字溢出处理单行省略单行文本三件套white-space:nowrap; 断行处理：无断行overflow:hidden;溢出处理：隐藏text-overflow:ellipsis;文字溢出处理：省略号例子：<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫