CSS中的文字换行处理方式较多,其中不换行、超出后省略掉部分文字是一种比较常用的方式。在CSS中,实现这种效果主要需要用到下面两个属性。white-space: nowrap; // 不换行 text
CSS中的文字换行处理方式较多,其中不换行、超出后省略掉部分文字是一种比较常用的方式。在CSS中,实现这种效果主要需要用到下面两个属性。
white-space: nowrap; // 不换行 text-overflow: ellipsis; // 超出部分省略号
white-space属性设置元素内空白的处理方式。nowrap是其中一种值,表示不换行。通过这个属性的设定,可以让文字在不到一行的宽度内全部显示出来。
但有时候内容过长,不可能全部显示在一行内。此时就需要用到text-overflow属性的值为ellipsis。该属性的作用是当文本溢出包含它的块级元素时,以省略号表示。同时,该属性前提条件是元素已设置了一个宽度或最大宽度。
overflow: hidden; // 超出部分隐藏 text-overflow: ellipsis; // 超出部分省略号 white-space: nowrap; // 不换行 width: 200px;
除了以上两个属性之外,为了避免文字溢出,还需要将容器的宽度设置合理。例如,在width属性设置为200px的容器中,如果文字超过一行,就会出现省略号。同时,为了避免超出部分显示,还可以设置overflow属性为hidden来隐藏超出部分。
综上所述,CSS中的不换行、超出后省略掉部分文字需要同时使用white-space属性的nowrap值和text-overflow属性的ellipsis值,并设置合适的容器宽度,以实现预期效果。
粉丝
0
关注
0
收藏
0