• HTML文本溢出处理

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

    1.处理单行文本溢出

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

    2.处理多行文本溢出

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

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

        完整的HTML代码如下:

            

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>文本溢出处理title>
    6.     <style>
    7.         .container {
    8.             border: 1px solid #ff8499;
    9.             padding: 10px;
    10.             width: 500px;
    11.             min-height: 400px;
    12. 			margin: auto;
    13.         }
    14.  
    15.         .container p {
    16.             color: #01a1ff;
    17.         }
    18.         .container .oneRowP {
    19. 			/* 设置文本溢出时的处理模式 */
    20.             text-overflow:ellipsis;
    21.             overflow: hidden;
    22.             white-space: nowrap;
    23.         }
    24. 		
    25. 		.container .twoRowsP {
    26. 			display: -webkit-box;
    27. 			-webkit-box-orient: vertical;
    28. 			/* 设置显示的文本行数 */
    29. 			-webkit-line-clamp: 2;
    30. 			overflow: hidden;
    31. 			
    32. 		}
    33. 		
    34. 		h3 {
    35. 			text-align: center;
    36. 			margin: 10px;
    37. 		}
    38.  
    39.     style>
    40. head>
    41. <body>
    42.     <div class="container">
    43. 		<h3>单行文本是否溢出处理h3>
    44.         <p class="noLimitRowsP">
    45.             我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    46.             我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    47.         p>
    48.         <p class="oneRowP">
    49.             我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    50.             我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    51.         p>
    52. 		
    53. 		<h3>多行文本是否溢出处理h3>
    54. 		<p class="noLimitRowsP">
    55. 		    我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    56. 		    我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    57. 		p>
    58. 		<p class="twoRowsP">
    59. 		    我只能显示出来两行你信不信我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    60. 		    我不知道你在想什么还是那个地点那条街哦;我不知道你在想什么还是那个地点那条街哦;
    61. 		p>
    62.     div>
    63. body>
    64. html>

  • 相关阅读:
    Linux-常见命令(三)
    SpringCloud的服务发现框架 — Eureka — 单机Eureka构建流程，以及服务注册功能实现
    车载软件架构 —— 持续集成持续交付
    Python入门、环境搭建、变量、数据类型
    [python刷题模板] 最短路(Dijkstra)
    Java学习笔记---多态综合练习
    WEB开发技能树-JavaScript-BOM-Window对象
    PeproTech重组Long R3 IGF-I
    什么是私有云？您应该知道的 6 个优势
    设计模式 笔记11 | 创建型设计模式在源码中的应用 总结篇（一）
  • 原文地址：https://blog.csdn.net/FreshManCode/article/details/128135718