Webcourse/03-CSS进阶/CSS开发积累.md
2019-11-27 12:05:12 +08:00

1.2 KiB
Raw Blame History

让文字只显示一行,超出显示省略号

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

让文字最多只显示两行,超出后显示省略号

	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;

2019-11-12-CSS的逗号和空格

CSS的逗号一般写在()里。不同属性值之间,用的是空格,不是逗号。比如:

	transform: translate(-50%, -50%);  /* 这种写逗号 */
	transform: translate(-50%, -50%) scale(0.5);   /* 不同属性值之间,用的是空格 */

	background-size: 100% 100%;  /* 这里是空格,不是逗号 */

2019-11-01

价格中的羊角符号,有半角和全角之分:

  • ¥半角

  • ¥全角

可以看出,半角的宽度更小。考虑到容器的空间一般比较紧张,所以推荐使用半角

2019-11-19-鼠标悬停时,弹出提示文字

参考链接:css实现鼠标悬浮后的提示效果

2019-11-27-图片的宽度固定,高度自适应

这个场景下别用background。直接放img元素就好了将图片的高度设置为auto