文本限制行数，超出后显示为省略号

主要把装着文字的盒子设为-webkit-box布局，然后设置以下的属性即可，主要-webkit-line-clamp是为限制的行数。

1
2
3
4
5
6
display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
-webkit-line-clamp: 2; /* 显示的行数，这里限制为两行 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式，这里为向下排 */
overflow: hidden; /* 超出盒子部分隐藏 */
text-overflow: ellipsis;  /* 文字超出两行的部分为省略号 */
word-break: break-all;  /* break-all(允许在单词内换行。) */

文本识别’\n’换行符

  • 将文本盒子white-space设为pre-wrap
1
2
3
4
// pre-wrap	保留空白符序列，但是正常地进行换行。
text{
   white-space: pre-wrap; 
}
  • 这里讲一下white-space这个属性

white-space属性 源码空格 源码换行
换行		 容器边界换行
normal 合并 忽略 换行 换行
nowrap 合并 忽略 换行 不换行
pre 保留 换行 换行 不换行
pre-wrap 保留 换行 换行 换行
pre-line 合并 换行 换行 换行

灵活运用rem单位实现文字大小自适应

  • rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。

rem 主要是为了解决字体随屏幕变化，flex上的高度问题，实现高度和宽度等比例缩放

  • css3规定：1rem的大小就是根元素<html>的font-size的值。

​ 使用rem单位的好处呢，就是我们如果相对页面的文字大小作修改，那么我们只需要改<html>的font-size值就行了，其它的用了rem单位的文本就会相对的一起作出改变。

演示代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
    <div class="box">
        我是AliveSeven
    </div>
</html>

<style>
    html{
        font-size: 30px;
    }

    .box{
        font-size: 1.5rem;
        color: blue;
    }

    @media screen and (max-width : 980px){
        html{
            font-size: 28px;
        }
    }

    @media screen and (max-width : 880px){
        html{
            font-size: 25px;
        }
    }

    @media screen and (max-width : 780px){
        html{
            font-size: 22px;
        }
    }

    @media screen and (max-width : 680px){
        html{
            font-size: 20px;
        }
    }

    @media screen and (max-width : 580px){
        html{
            font-size: 18px;
        }
    }

</style>

演示效果

rem演示