HTML文本溢出处理

最新推荐文章于 2024-03-02 14:37:06 发布

FreshManCode

最新推荐文章于 2024-03-02 14:37:06 发布

阅读量1.5k

点赞数 2

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

本文链接：https://blog.csdn.net/FreshManCode/article/details/128135718

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有时在做某些需求布局时,需要处理文本溢出时的情况,如果不处理可能会重新重叠的效果,关于设置文本溢出,主要就是多行/单行的处理,代码如下

1.处理单行文本溢出

        /* 设置文本溢出时的处理模式 */
        text-overflow:ellipsis;
        overflow: hidden;
        white-space: nowrap;

2.处理多行文本溢出

        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* 设置显示的文本行数 */
        -webkit-line-clamp: 2;
        overflow: hidden;

第一条是针对单行文本溢出是否处理之后的对比
第二条是针对多行文本溢出时,需要显示几行文本处理之后的对比

完整的HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本溢出处理</title>
    <style>
        .container {
            border: 1px solid #ff8499;
            padding: 10px;
            width: 500px;
            min-height: 400px;
			margin: auto;
        }

        .container p {
            color: #01a1ff;
        }
        .container .oneRowP {
			/* 设置文本溢出时的处理模式 */
            text-overflow:ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
		
		.container .twoRowsP {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			/* 设置显示的文本行数 */
			-webkit-line-clamp: 2;
			overflow: hidden;
			
		}
		
		h3 {
			text-align: center;
			margin: 10px;
		}

    </style>
</head>
<body>
    <div class="container">
		<h3>单行文本是否溢出处理</h3>
        <p class="noLimitRowsP">
            我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
            我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
        </p>
        <p class="oneRowP">
            我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
            我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
        </p>
		
		<h3>多行文本是否溢出处理</h3>
		<p class="noLimitRowsP">
		    我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
		    我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
		</p>
		<p class="twoRowsP">
		    我只能显示出来两行你信不信我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
		    我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
		</p>
    </div>
</body>
</html>