[INTERVIEW]CSS

[kangkai124]

css相关的问题

[kangkai124]

1. 实现下图所示样式

小方块方形宽度随浏览器窗口变化，但始终保持正方形

答案

方法1：padding ```html

``` ```css .container { width: 90%; border: 1px solid; display: flex; padding: 3.6% 1.8%; margin: 20px 0; } .child { flex: 1; } .child-item { width: 80%; padding: 80% 0 0; border: 1px solid; margin: 0 auto; } ``` 方法2：vw ```html

``` ```css .container2 { width: 90vw; border: 1px solid; display: flex; } .child2 { width: 18vw; height: 18vw; } .child2-item { width: 80%; height: 80%; border: 1px solid; margin: 10%; } ```

[kangkai124]

2. CSS 实现多行文本截取

答案

1. -webkit-line-clamp 实现 ```css display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; ``` 2. float 特性实现多行文本截断 ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.

``` ```css .wrap { height: 40px; line-height: 20px; overflow: hidden; width: 50%; } .wrap .text { float: right; margin-left: -5px; width: 100%; word-break: break-all; } .wrap::before { content: ''; float: left; width: 5px; height: 40px; } .wrap::after { content: '...'; float: right; height: 20px; line-height: 20px; width: 2em; margin-left: -2em; position: relative; left: 100%; top: -20px; padding-right: 5px; text-align: right; z-index: 9; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } ``` 参考：https://zhuanlan.zhihu.com/p/34326190