前言

最近在做公司的编辑器项目，遇到了好些问题，有js的，也有css的，今天总结下从编辑器学到的css知识。

正文

我们的编辑器是基于quill.js开发的，它有一套自己的样式，正常使用是没问题的。

但是我们基于它们原来的样式改了一些，然后测试有一天提出一个问题，就是在文本高亮后一直按空格，会超出编辑器的宽度。

如图

因为ql-editor默认设置了overflow-y: auto，不会超出显示。

但是我们的滚动条需求，需要把它改成visible，所以导致它超出显示了。

那还有什么办法能不让它们不超出现示？

这时候看到ql-editor使用了white-space属性，它是处理元素的空白字符的，它的值是pre-wrap。

我们对white-space这个属性很熟，经常用来处理不换行（nowrap），它还有其它值，下面介绍一下。

white-space属性

属性值如下：

normal 默认样式，空白符会被合并，换行符会替换成空白符，再合并，开头如果有换行符或者空白符会被过滤
nowrap 空白符会被合并，遇到换行符也不会换行，除非是br标签
break-spaces 空白符会被保留，超出盒子会主动换行，遇到换行符或者br标签会换行
pre-wrap 空白符会被保留，超出盒子不会主动换行（文本会主动换行，空白符不会主动换行），导致元素的宽度会超出父元素宽度
pre 空白符会被保留，不会主动换行（文本会超出），只有遇到换行符或者br标签才会换行
pre-line 空白符会被合并，然后超出盒子会主动换行，或者遇到换行符或者br标签也会换行

下面通过例子来看一下：

html 复制代码

  <style>
    .line {
      margin: 20px;
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
  <div class="line">
    测试换行             测试换行                         
                  测试换行             测试换行                     
  </div>

normal

nowrap

break-spaces

pre-wrap

pre

pre-line

为了空格符不超出盒子，同时也要保留空格符，我们最终选择了break-spaces。

编辑器设置其它字体，加粗没效果(mac)

这一天，测试又找到我，说编辑器的默认字体加粗有效果 ，但是设置成宋体加粗没效果。

我排查了一下，window是没有这个问题，mac是有这个问题。

查阅了一些资料，发现有个字体平滑属性 可以解决， font-smoothing。

在chrome使用-webkit-font-smoothing，值有auto,none,antialiased（字体像素级别平滑）和subpixel-antialiased(非视网膜更好的显示)

在firefox里使用-moz-osx-font-smoothing，值有auto和grayscale(等同于antialiased)。

通过例子演示一下：

html 复制代码

  <style>
    .font {
      margin: 0 20px;
      line-height: 24px;
      font-family: SimSun,STSong;
    }

    .bold {
      font-weight: bold;
    }

    .smoothing {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
  <div class="font">我是宋体，但不加粗</div>
  <div class="font bold">我是宋体，但是加粗</div>
  <div class="font bold smoothing">我是宋体，但是加粗，并且使用了smoothing</div>

默认字体：

宋体：

可以看到，默认字体没问题。

宋体没有设置font-smoothing，加粗没效果，且有锯齿。

设置了font-smoothing之后，加粗有效果，字体很平滑。

resize属性

quill支持图片上传，会转成base64显示，但是它默认不支持对图片进行操作，比如放大缩小。产品就提出看看能不能支持一下。

这天，突然看到有个resize属性，textarea默认是设置了这个属性，所以它默认可以拖动改变尺寸。

感觉resize属性也可以用在图片上，让它支持放大缩小。

resize属性不能用在inline元素，或者overflow:visible的block元素

默认值是none(不拖动)。 both代表它可以在垂直和水平方向拖动，其他值还有horizontal（仅水平方向）和vertical（仅垂直方向）。

实测发现，reize属性不能直接用在img标签上，可以用在它外层的p元素。

css 复制代码

    p:has(img) {
      overflow: auto;
      resize: both;
    }

可以通过拖动这个图标实现放大缩小。

备注：这个属性在这里仅仅只是演示，让大家更了解这个属性。

从编辑器中总结的css知识

前言

正文

white-space属性

编辑器设置其它字体，加粗没效果(mac)

resize属性