css3单行省略和多行省略

一，单行省略

body 部分

<body>
	<div class="box1">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
</body>

css部分

<style>
	.box1 {
		width: 100px;/* 设置文本的宽度 */
		overflow: hidden;/* 溢出隐藏 */
		white-space: nowrap;/* 文本不会换行，会在在同一行上继续 */
		text-overflow: clip;/* 指定应向用户如何显示溢出内容 */
	}
</style>

请添加图片描述

text-overflow: clip;会直接省略多余的部分

若设置text-overflow: ellipsis;则会在加上省略号的情况下，宽度不超过100px;

<style>
	.box1 {
		width: 100px;/* 设置文本的宽度 */
		overflow: hidden;/* 溢出隐藏 */
		white-space: nowrap;/* 文本不会换行，会在在同一行上继续 */
		text-overflow: ellipsis;/* 指定应向用户如何显示溢出内容 */
	}
</style>

请添加图片描述

二，多行省略

body部分

<body>
	<h1>我我我我我我我我我我我我我我我我我我我</h1>
</body>

css部分

<style>
	h1 {
		width: 100px;
		display: -webkit-box;/* 对象作为弹性盒子模型显示 */
		overflow: hidden;/* 溢出隐藏 */
		-webkit-box-orient: vertical;/* 设置伸缩盒子对象的子元素的排列方式 */
		-webkit-line-clamp: 3;/* 设置块元素包含的文本行数 */
	}
</style>

请添加图片描述

css3单行省略和多行省略

一，单行省略

二，多行省略

悦读