溢出容器部分的文字处理

最新推荐文章于 2024-10-18 11:46:13 发布

Nemo.1213

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量215

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_45763491/article/details/107749701

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

单行文本，溢出部分打点

<head>
    <title>溢出容器内容打点</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0
    }
    .single{
    	width: 400px;
    	height: 25px;
    	border: 1px solid grey;

    	/******让文字不换行*****/
    	white-space: nowrap;
    	/**溢出部分内容隐藏**/
    	overflow: hidden;
    	/**溢出部分的文字用点表示**/
    	text-overflow: ellipsis;
    }
    </style>
</head>

<body>
	<p class="single">台风“黑格比”将于3日夜间登陆浙闽沿海 中央气象台继续发布台.</p>
</body>

效果图：

多行文本，溢出部分直接截断（css3中有技术可以打点，但一般只针对移动端，因为PC端有老版本的浏览器，不支持css3）
1. 利用line-hight与font-size的比，来控制显示多少行文字：例如，font-size：24px; 要显示两行文本，则line-heght:48px;
2. 用overflow:hidden;来截断溢出的内容