77 lines
1.4 KiB
Markdown
77 lines
1.4 KiB
Markdown
|
||
|
||
### 让文字只显示一行，超出显示省略号
|
||
|
||
```
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
|
||
```
|
||
|
||
|
||
### 让文字最多只显示两行，超出后显示省略号
|
||
|
||
```
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
display:-webkit-box;
|
||
-webkit-box-orient:vertical;
|
||
-webkit-line-clamp:2;
|
||
```
|
||
|
||
### 问题描述：文本内容里自带了换行，但是在前端没有展示出来
|
||
|
||
解决办法：增加如下属性即可。
|
||
|
||
```
|
||
white-space: pre-wrap;
|
||
```
|
||
|
||
或者：
|
||
|
||
```
|
||
white-space: pre-line;
|
||
```
|
||
|
||
|
||
|
||
### 2019-11-12-CSS的逗号和空格
|
||
|
||
CSS的逗号一般写在()里。**不同属性值之间，用的是空格**，不是逗号。比如：
|
||
|
||
```css
|
||
transform: translate(-50%, -50%); /* 这种写逗号 */
|
||
transform: translate(-50%, -50%) scale(0.5); /* 不同属性值之间，用的是空格 */
|
||
|
||
background-size: 100% 100%; /* 这里是空格，不是逗号 */
|
||
```
|
||
|
||
|
||
### 2019-11-01
|
||
|
||
价格中的羊角符号，有半角和全角之分：
|
||
|
||
- ¥半角
|
||
|
||
- ￥全角
|
||
|
||
可以看出，半角的宽度更小。考虑到容器的空间一般比较紧张，所以推荐使用**半角**。
|
||
|
||
|
||
### 2019-11-19-鼠标悬停时，弹出提示文字
|
||
|
||
参考链接：[css实现鼠标悬浮后的提示效果](https://www.cnblogs.com/zhaojian-08/p/10074660.html)
|
||
|
||
|
||
### 2019-11-27-图片的宽度固定，高度自适应
|
||
|
||
这个场景下，别用background。直接放img元素就好了，将图片的高度设置为`auto`。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|