单行及多行文本垂直居中,(ie用了js)

最新推荐文章于 2023-02-11 21:16:48 发布

dongsdh

最新推荐文章于 2023-02-11 21:16:48 发布

阅读量419

点赞数

分类专栏：有示例图片的小列子 ie兼容

本文链接：https://blog.csdn.net/dongsdh/article/details/104987326

版权

ie兼容同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

有示例图片的小列子

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style>
		span{
			font-size: 16px;
		}
		
		.box1{
			width: 150px;
            height: 80px;
    		line-height: 80px;
			background: #ddd;
        }
        .box1 span{
            display:inline-block;
            line-height:20px;
            vertical-align: middle;  
        }
        .box1 b{
        	display: inline-block;
        	width: 16px;
        	height: 16px;
        	line-height: 16px;
        	text-align: center;
        	background: goldenrod;
        	margin: 2px;
        	color: #fff;
        }
        
        .box2{
        	background: #ddd;
			width: 150px;
            height: 80px;
			display:flex;
			align-items:center;
			overflow: hidden;
        }
        .box2 b{
        	display: inline-block;
        	width: 16px;
        	height: 16px;
        	line-height: 16px;
        	text-align: center;
        	background: goldenrod;
        	margin: 2px;
        	color: #fff;
        }
        .box2 span {
			overflow:hidden;
			text-overflow:-o-ellipsis-lastline;
			text-overflow:ellipsis;
			display:-webkit-box;
			display:-moz-box;
			-webkit-line-clamp:2;
			-moz-line-clamp:2;
			line-clamp:2;
			-webkit-box-orient:vertical;
			-moz-box-orient:vertical;
		}
		
		.box3{
			width: 150px;
            height: 80px;
    		line-height: 80px;
			background: #ddd;
			box-sizing: border-box;
			display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
		}
		.box3 span{
			padding-right: 10px;
			display:inline-block;
            line-height:20px;
            vertical-align: middle; 
            height: 38px;
    		overflow: hidden; 
    		position: relative;
		}
		.box3 b{
			display: inline-block;
        	width: 16px;
        	height: 16px;
        	line-height: 16px;
        	text-align: center;
        	background: goldenrod;
        	margin: 2px;
        	color: #fff;
		}
	</style>
</head>
<body>
	<h2>理想情况下在显示的时候字数就不要过多</h2>
	<h4>文本里面还包裹有标签的单行或多行文本居中</h4>
	<div class="box1">
        <span><b>1</b>大家好，我是东，我来自南方</span>
    </div>
    <br />
	<div class="box1">
        <span><b>2</b>大家好，我是东</span>
    </div>
    <br />
    <div class="box1">
        <span><b>3</b>大家好，我是东，我来自南方,南方四季如春,很少下雪</span>
    </div>
    <h4>文本里面还包裹有标签的,超过两行显示...（ie无效）</h4>
    <div class="box2">
        <span><b>1</b>大家好，我是东，我来自南方,南方四季如春,很少下雪很少下雪很少下雪很少下雪很少下雪</span>
    </div>
    <h4>文本里面还包裹有标签的,超过两行显示...兼容ie</h4>
    <div class="content">
	    <!--动态-->
    </div>
    <script src="jquery.min.js"></script>
    <script>
    	iefun()
    	function iefun() {
	    	var sd=[
	    		'大家好',
	    		'大家好，我是东，我来自南方,南方四季如春,很少下雪很少下雪很少下雪很少下雪很少下雪'
	    	];
	    	var shtml='';
	    	for(var i=0,len=sd.length;i<len;i++){
			  	if(sd && sd.length>0){
			  	    for(var i=0,len=sd.length;i<len;i++){
			  	    	console.log(sd[i].length);
			  	        shtml+='<div class="box3">'
							+'        <span><b>1</b><em>'+ ( sd[i].length>13 ? sd[i].substr(0,12)+'...' : sd[i] ) +'</em></span>'
							+'    </div>';
			  	    }
			  	}else{
			  	    shtml='暂无数据';
			  	}
			}
			$('.content').html(shtml);
    	}
    </script>
</body>
</html>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行及多行文本垂直居中,(ie用了js)

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <style> span{ font-size: 16px; } .box1{ width: 150px; height: 80px; ...
复制链接

扫一扫