文本节点的样式

发表于 更新于
本文字数： 4.6k 阅读时长 ≈ 8 分钟

一些常用属性

white-space

工作里遇到特别设置时的高频情景是no-wrap

value 空白符 换行符 过长时自动折行
normal 合并 改空白 折
pre 不合并 换行 按内容
nowrap 合并 改空白 不折
pre-wrap 不合并 换行 折
pre-line 合并 换行 折

word-wrap

长单词或者url地址换行的规则——即是否允许单词内断句，防止字符串太长却因没有自然断句点而溢出，工作里遇到特别设置时的高频情景是break-word

  1. normal 只在允许的断字点换行（浏览器保持默认处理）
  2. break-word 在长单词或 URL 地址内部进行换行。

word-break

规定自动换行的规则

  1. normal 浏览器默认规则
  2. break-all 允许单词内换行（断开单词）
  3. keep-all 只允许在半角空格或者连字符处换行

效果：文本溢出的时候以省略号缩略

初阶：对于固定宽度的容器

较为简单，三件套：其中，text-overflow还可以设置成一个字符串，表示用它来代表被修剪的文本（而不是ellipsis那样用省略号来代替）；当然也可以简单设置成clip只修剪不替代。

1
2
3
4
width: /* 此处应有一个固定宽度; */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

进阶：在Flex布局里

  1. 难点：如果是flex布局，很显然容器里的内容物是宽度自适应的，上面的处理就不能简单地解决问题，单纯这么做，最后只会让内容物撑开父容器
  2. 解决：给需要处理文本的容器的父容器增加overflow: hidden;
  3. 注意：这个时候，不可以对父容器的`align-items做设置：即使是flex-start这个是默认值也不能显式地声明，但依然会按照默认的flex-start进行布局。
  4. 比如在一个flex布局里，容器a内部有一些内容，需要处理文本溢出，那么就对容器a增加overflow:hidden，对a内部需要处理文本溢出的内容容器增加上面的CSS样式三件套即可。
  5. 除了设置hidden之外，还可以粗暴的设置width: 0达到相同的效果。

其他实现：利用绝对定位

  1. 需要注意场景需求，这个方法无法根据文字是否需要截断来判断，截断总是会被显示着
  2. 原理是将一个元素绝对定位到行尾去遮住文字，一般用伪元素即可

  3. 范例代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    p {
      position: relative;
      line-height: 18px;
      height: 16px;
      overflow: hidden;
    }
    p::after {
      content: "...";
      font-weight: bold;
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0 20px 1px 45px;
      /* 添加以下，获得更好的视觉效果 */
      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);
    }

其他实现：利用float特性实现多行文本截断

  1. 兼容性比较好，特别适用于多行文字截断，并且是响应式的

  2. 范例代码

    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
    .wrapper {
      height: 40px;
      line-height: 20px;
      overflow: hidden;
    }
    .wrapper .text {
      float: right;
      margin-left: -5px;
      width: 100%;
      word-break: break-all;
    }
    .wrapper::before {
      float: left;
      width: 5px;
      content: '';
      height: 40px;
    }
    .wrapper::after {
      float: right;
      content: '...';
      height: 20px;
      line-height: 20px;
      /* 控制省略号的位置 */
      text-align: center;
      /* 三个省略号的宽度 */
      width: 3em;
      /* 使得盒子不占位置 */
      margin-left: -3em;
      /* 移动省略号位置 */
      position: relative;
      left: 100%;
      top: -20px;
      /* 这一行代码很重要 */
      padding-right: 5px;
      /* 优化样式 */
      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);
    }

移动端文案换行

业务场景描述

  1. 移动端现在还需要兼容小屏幕手机，但是大部分时候我们的设计稿都是根据750/375设置了
  2. 但是移动端存在中文字体最小12px的限制。这是出于阅读的体验考虑，即使设置了低于12px的字体，依然会展示成12px
  3. 开发环境里，Chrome在英文版和简体中文版里的表现也会有这样的不同，这是开发过程需要注意的，如果使用英文版进行开发和调试，可能就无法在开发中发现问题。

一般解决思路的问题

  1. 根据设计去设定字体，对于小于12px的字体，通过CSS样式scale进行缩放
  2. 在代码层面，写成多行（比如多个p标签）

结合flex布局进行设置

  1. 使用这个方法的目的，是使得内容能根据语义进行换行，而不是简单的根据CSS样式white-space、word-wrap、word-break设置的自动换行来换行。
  2. 并且，这个换行将按需进行，也就是只在屏幕不够大的时候进行，这样避免了一刀切的换行导致大家都不满意。
  3. 容器宽度固定，并且设置成flex布局，另外还需要两个重要的CSS样式
    1. flex-wrap: wrap;这个规则用于指定当容器的大小不够的时候，内容物的换行表现，我们设定成换行（默认是不换行）
    2. align-content: center;这个规则用于指定当内容物换行后，在交叉轴的对齐方式。通常我们会选择center，当然也可以根据需求选择flex-start、flex-end、space-between、space-around、stretch
  4. 然后内容物根据文案的语义，用HTML标签分割，比如一句话我们可以按照换行的预想，将内容分装进若干span标签——这些span标签作为flex容器里的item，在屏幕小的时候，就会根据标签来换行——效果上看就是按照语义把短语换行了。

placeholder的样式问题

  1. 要设定可输入框（<input>或者<textarea>）的placeholder的样式，可以通过伪元素选择器::placeholder或者伪类:placeholder（取决于浏览器兼容性）来设定。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    :-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      color: pink;
      /* opacity: 1; */
    }
    :-moz-placeholder { /* Firefox 18- */
      color: pink;
      /* opacity: 1; */
    }

  2. 需要注意的是，部分浏览器会对placeholder的opacity做改变（说的就是火狐狸），所以设定样式的时候，有时候需要加主动设置改回来。

  3. 进阶：可以通过设定伪类:placeholder-shown对显示着placeholder的输入框进行样式定制。和上面做法的区别是：这是对输入框本身的样式设置，而不是对placeholder那个文本本身做设置
  4. 伪类和伪元素选择器可以配合其他选择器使用，比如input:placeholder和input::-moz-placeholder。值得一提的是，究竟通过伪类还是伪元素来控制，其实尚且没有什么严格的标准。但是有些场景你可能不得不使用伪元素，比如input:focus::placeholder如果使用伪类:placeholder就没法做。事实上，除了IE10（及以下），其他浏览器大致都支持伪元素的placeholder
  5. 并且，作为伪元素的时候，可以对它的许多样式做设定：font的所有属性、color、background的所有属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、text-indent、opacity。所以使用伪元素是比用伪类来的好的。