• textoverflow简单使用


    text-overflow属性配合overflow才有效果,还记得把文字强制一行显示,如下代码:
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>text-overflow</title>
    <meta name="author" content="Guxingzhe" />
    <style>
    .test li {
    	margin-top: 10px;
    }
    
    .test .clip label {
    	display: inline-block;
    	overflow: hidden;
    	 200px;
    	white-space: nowrap;
    	text-overflow: clip;
    }
    
    .test .ellipsis label {display: inline-block;
    	overflow: hidden;
    	 200px;
    	white-space: nowrap;/*  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。  */
    	text-overflow: ellipsis;
    }
    </style>
    </head>
    <body>
    	<ul class="test">
    		<li class="clip"><strong>clip: 直接将溢出的文字裁剪</strong>
    			<label>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</label></li>
    		<li class="ellipsis"><strong>ellipsis: 将溢出的文字显示省略标记(...)</strong>
    			<label>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</label></li>
    	</ul>
    </body>
    </html>
    

    效果图:

  • 相关阅读:
    Bzoj1101 [POI2007]Zap
    Bzoj2393 Cirno的完美算数教室
    UVa10891 Game of Sum
    Bzoj4128 Matrix
    类的组合
    继承
    属性查找与绑定方法
    类与对象
    面向对象程序设计——基础概念
    修改个人信息的程序
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5050992.html
Copyright © 2020-2023  润新知