css使文字超出显示区域显示省略号--小技巧 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.box {
				width: 200px;
				border: 2px solid #000;
				margin-bottom: 20px;
			}

			.box1 {
				white-space: nowrap;
				/*强制不换行*/
				overflow: hidden;
				text-overflow: clip;
			}

			.box2 {
                            /*关键代码3行*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.box3 {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: "abc";
			}

			.box4 {
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.box5 {
				word-wrap: normal;
				/*只允许在断字点进行换行*/
				word-wrap: break-word;
				/*在长单词或URL地址内部进行换行*/
			}
			
			        .box6{
			            width: 200px;
			            border: 2px solid #000;
			
			            overflow: hidden;
			            text-overflow: ellipsis;
			
			            display: -webkit-box;/*将标签设置为弹性伸缩盒子*/
			            -webkit-line-clamp: 2;/*行数*/
			            -webkit-box-orient: vertical;/*伸缩盒子元素的排列方式*/
			        }
			        .box7{
			            width: 200px;
			            border: 2px solid #000;
			
			            height: 60px;
			            line-height: 30px;
			
			            overflow: hidden;
			            position: relative;
			        }
			        .box7::after{
			            content: "......";
			            position: absolute;
			            right: 0;
			            bottom: 0;
			            background: #fff;
			            padding-left: 4px;
			            padding-right: 10px;
			        }
		</style>
	</head>
	<body>
		<div class="box box1">内容内容内容内容内容内容内容内容内容内容内容内容</div>
		<div class="box box2">内容内容内容内容内容内容内容内容内容内容内容内容</div>
		<div class="box box3">内容内容内容内容内容内容内容内容内容内容内容内容</div>
		<div class="box box4">kdsjflkdsjflkdsjflksdfjlkdsjfldskfjsldfjsldfs</div>
		<div class="box box5">kdsjflkdsjflkdsjflksdfjlkdsjfldskfjsldfjsldfs</div>
		    <div class="box6">内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 </div>
		    <div class="box7">内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 </div>
	</body>
</html>

posted @ 2021-10-04 12:45  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源