HTML文本溢出处理

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

1.处理单行文本溢出


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

2.处理多行文本溢出


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

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

完整的HTML代码如下:


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>

相关阅读:
云原生爱好者周刊：炫酷的 Grafana 监控面板集合
【洛谷】P1114 “非常男女”计划
2022面试相关- reactnatvie相关
#边学边记必修5 高项:对人管理第1章项目人力资源管理之规划人力资源管理
spring boot数据导出excel
11.软件测试-----性能测试
基于JAVA小说阅读网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署
AI游戏设计的半年度复盘；大模型+智能音箱再起波澜；昇思大模型技术公开课第2期；出海注册经验分享；如何使用LoRA微调Llama 2 | ShowMeAI日报
异地局域网对接：异地组网原理与实操
电池集成充电解决方案提供商【XCharge Group】获得壳牌风险投资

原文地址：https://blog.csdn.net/FreshManCode/article/details/128135718