css使用记录控制文本显示行数控制图片显示大小

B0xing

已于 2023-06-10 21:47:07 修改

阅读量315

点赞数 1

分类专栏： css 文章标签： css html 前端 css3 html5

于 2023-04-20 13:10:59 首次发布

本文链接：https://blog.csdn.net/boxing012/article/details/130262529

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.实现文本单行不换行,超出部分截断并末尾添加…

注意必须设定盒子固定宽度；如果宽度设置百分比,则父布局的宽度必须设定,否则设置百分比不生效。

/* css */
width: 100px;/*给定宽度*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

2.控制盒子固定行数显示文本

2.1 第一种方式使用浏览器扩展属性 -webkit-box 实现，超出部分截断并末尾添加… 缺点：兼容性不好，有些浏览器没有实现box-flex规范

/* css */
width: 200px;
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 设置文本显示的行数 */
overflow: hidden;

2.2 第二种方式通过设置line-height和height属性实现，height的值等于line-height*显示的行数。缺点：结尾没有… 不美观

/* css */
width: 200px;
line-height: 25px;
height: 75px;/* line-height * 3 只显示三行内容 */
overflow:hidden;

2.3 第三种方式使用js截断超出显示的字符并在末尾添加… 缺点：不支持盒子是弹性时的情况

<html>
<head>
	<style>
		.content{
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="content"></div>
	<script>
		// 使用js实现，当字符数超过显示字符时，截取并加上...,  缺点：只适合盒子宽度不变，不适合弹性宽度
		let brief="豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。"
		if(brief.length>24){
			brief=brief.substr(0,22)+"...";
		}
		document.querySelector(".content").innerHTML = brief
	</script>
</body>
</html>

3.设置背景图填充元素大小

3.1 background-size 设置背景图的大小跟父布局大小相同

background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("图片地址");

4. image 标签设置图片的缩放模式

object-fit

/* 缩放并保持缩放比例 */
object-fit: contain;

/* 保持缩放比例缩放图片，撑满盒子，超出部分裁剪 */
object-fit: cover;

/* 按盒子大小缩放，撑满盒子 不保持缩放比 */
object-fit: fill;
/* 按图片实际大小展示, 超出部分裁剪 */
object-fit: none;
/* 保持缩放比缩小图片以能全部展示 */
object-fit: scale-down;