343day（文字溢出处理，背景图片处理，css图片企业开发经验）

最新推荐文章于 2024-06-17 19:23:30 发布

原创最新推荐文章于 2024-06-17 19:23:30 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了CSS中处理文字溢出的方法，包括单行和多行文本的处理方式；讲解了如何设置背景图片及其尺寸、位置等属性；并分享了使用CSS进行图片链接布局的经验。

《2018年9月10日》【连续343天】

标题：文字溢出处理，背景图片处理，css图片企业开发经验；
内容：

1.文字溢出处理：

<!-- 溢出容器要打点展示
	1.单行文本
	2.多行文本 -->
	<p>英雄史诗是法国最古老的文学。英雄史诗主要分为帝王系、纪尧姆·德·奥郎日系和敦·德·梅央斯系。《罗兰之歌》是帝王系的主要作品。</p>

p{
	width:300px;
	height: 20px;
	line-height: 20px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

p{
	width:300px;
	height: 40px;
	border:1px solid black;
	line-height: 20px;

	/*white-space: nowrap;*/
	overflow: hidden;
	/*text-overflow: ellipsis;*/
}

2.背景图片处理：

<div></div>

div{
	width: 600px;
	height: 200px;
	border:1px solid black;
	background-image: url(https://cdn.steamstatic.com.8686c.com/steam/subs/124923/header_586x192.jpg?t=1472603344);
	background-size: 600px 200px;
	background-repeat: no-repeat;
	/*background-position: x y;*/
}

3.css图片企业开发经验

<a href="http://www.taobao.com" target="_blank">淘宝网</a>


a{
	display: inline-block;
	text-decoration: none;
	color: #424242;
	width:190px;
	height: 0px;
	padding-top: 90px;
	overflow: hidden;
	background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536606307327&di=e3bc7d4c150bd453a87e9d3a8674e469&imgtype=0&src=http%3A%2F%2Fwww.niupr.com%2Fwp-content%2Fuploads%2F2018%2F04%2F0ae99d951b58afd579f8.jpg);
	background-size: 190px 90px;
}