CSS3设置属性用来显示文字太长在后面加省略号，背景图不能完全撑开

最新推荐文章于 2021-10-24 14:36:57 发布

炸_洋芋

最新推荐文章于 2021-10-24 14:36:57 发布

阅读量1.2k

点赞数

分类专栏： CSS3 文章标签： css3 overflow url地址换行背景图片留白问题背景图片不能完全撑开

本文链接：https://blog.csdn.net/zhaoxiang66/article/details/76571368

版权

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

####CSS3有三个属性同时配合可以达到这种效果，分别是text-overflow、white-space、overflow，三个属性缺一不可，必须同时使用，下面是示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#d1{
			width:200px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div id = "d1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</body>
</html>

下面是结果，注意外容器的宽度一定要是定宽（百分比也行应该），不然不好使

这里写图片描述

####附加：
如果项目中用到url地址太长不能放下的话，就想让它换行，换行可以这样做，亲测很好用

用CSS属性word-wrap: break-word;，这样URL就不会超出了，但是还是会先尝试换行，如果一行显示不下才会折行，如果再加上word-break: break-all;就直接折行。

题外话：还有一个属性，就是给整个定宽页面你加背景图的时候，如果你把浏览器宽度缩小，出了滚动条，一动滚动条，会发现背景图右边会有很大一片留白，你background-size:cover都不行，加上下面的属性就好了

.bg{
    width: 100%;
    min-height:100%;
    background: url('../../assets/images/bg.png') no-repeat;
    background-size:cover;
    // 加上下面这两个属性
    min-width: max-content;
    min-width: -moz-max-content;
}

炸_洋芋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3设置属性用来显示文字太长在后面加省略号，背景图不能完全撑开

CSS3有三个属性同时配合可以达到这种效果，分别是text-overflow、white-space、overflow，三个属性缺一不可，必须同时使用，下面是示例代码&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;ti
复制链接

扫一扫

专栏目录