Important modify css

Changeheight: 100%; to height: auto; the website do not break immediately.

.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: auto;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

The only style in that stylesheet for .ql-size-large is .ql-editor .ql-size-large, meaning it applies to elements with the class ql-size-large which are nested inside an element with class ql-editor. So if you have this snippet:

<span class="ql-size-large">Hello, dear friends!</span>

Then you need to embed this inside an element with the class ql-editor to end up with:

<div class="ql-editor">
    <span class="ql-size-large">Hello, dear friends!</span>
</div>

Then the CSS selector .ql-editor .ql-size-large will apply and style that element.

Metadata

Status :: #status/🌱

Note Type :: #📩/📰

Source URL :: html - The Quill publicly available css - Stack Overflow

Author :: {作者名稱}

Topics :: {筆記跟什麼主題有關,用[Topic],[Topic] 格式子}

To Me :: #mind

Parent Link :: {可以連結到哪個父筆記}

Sibling Link :: {可以連結到哪個相關筆記}

Child Link :: {可以連結到哪個子筆記}