zoukankan      html  css  js  c++  java
  • CSS 文字排版

    在一个table,div或input中,文字过长,一般都会截取处理,然后后面拼接省略号,以前我是这么做的,后端或者js截取,今天看到CSS自身属性就可以做到,内心无数省略号…
    效果图:
    在这里插入图片描述

    <html>
    	<head>
    	    <meta charset="UTF-8">
    	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    	    <title>文字排版</title>
    	    <link rel="stylesheet" href="./style.css">
    	    <style>
    	        .demo{
    	            margin: 30px;
    	            width: 100px;
    	            padding: 10px;
    	            border: 1px solid #ccc;
    	        }
    	
    	        .demo1{
    		        margin: 30px;
    		        width: 100px;
    		        padding: 10px;
    		        border: 1px solid #ccc;
    		        text-overflow:ellipsis;
    		        overflow:hidden;
    		        white-space: nowrap;
    	        }
    	
    	
    	        .demo1:hover{
    	            text-overflow:inherit;
    	            overflow:visible;
    	        }
    	
    	        .demo2{
    	            margin: 30px;
    	            width: 100px;
    	            padding: 10px;
    	            border: 1px solid #ccc;
    	            text-overflow:ellipsis;
    	            overflow:hidden;
    	            white-space: nowrap;
    	        }
    	        
    	        .demo2:hover{
    	            width: 500px;  
    	        }
    	    </style>
    	</head>
    
    	<body>
    	    <div class="demo">
    	        素胚勾勒出青花笔锋浓转淡
    	        瓶身描绘的牡丹一如你初妆
    	        冉冉檀香透过窗心事我了然
    	        宣纸上走笔至此搁一半
    	        釉色渲染仕女图韵味被私藏
    	        而你嫣然的一笑如含苞待放
    	        你的美一缕飘散
    	    </div>
    	
    	    <div class="demo1">
    	        素胚勾勒出青花笔锋浓转淡
    	        瓶身描绘的牡丹一如你初妆
    	        冉冉檀香透过窗心事我了然
    	        宣纸上走笔至此搁一半
    	        釉色渲染仕女图韵味被私藏
    	        而你嫣然的一笑如含苞待放
    	        你的美一缕飘散
    	    </div>
    	
    	    <div class="demo2">
    	        素胚勾勒出青花笔锋浓转淡
    	        瓶身描绘的牡丹一如你初妆
    	        冉冉檀香透过窗心事我了然
    	        宣纸上走笔至此搁一半
    	        釉色渲染仕女图韵味被私藏
    	        而你嫣然的一笑如含苞待放
    	        你的美一缕飘散
    	    </div>
    	</body>
    </html>
    

    在这里插入图片描述

  • 相关阅读:
    python爬虫系列之爬取多页gif图像
    python连续爬取多个网页的图片分别保存到不同的文件夹
    python多线程同步
    python多线程简单例子
    python定时器爬取豆瓣音乐Top榜歌名
    python模拟Get请求保存网易歌曲的url
    python使用get在百度搜索并保存第一页搜索结果
    python爬取某个网页的图片-如百度贴吧
    完全揭秘log file sync等待事件-转自itpub
    两表关联更新
  • 原文地址:https://www.cnblogs.com/wangqilong/p/12540359.html
Copyright © 2011-2022 走看看