内容溢出

Posted 2022-11-12 baixuezhemei

汉字内容溢出及解决办法

---

如果内容是汉字 默认的情况：汉字水平方向上不会溢出 如果垂直方向内容超出高度 这个时候导致内容溢出 浏览器在解析汉字的时候 会在任意一个的汉字换行

把超出的部分隐藏掉 默认把滚动条取消掉 overflow: hidden;
超出的部分滚动 竖直方向上有滚动条 可以滚动；水平方向上有滚动条，但不可以滚动 overflow: scroll;
水平方向有超出的部分滚动 效果 同overflow: scroll; overflow-x: scroll;
竖直方向上超出的部分 滚动； 网页展示的效果 竖直方向有滚动条 可以滚动，水平方向上没有滚动条 overflow-y: scroll; overflow-x: hidden;

英文状态下溢出

---

览器解析英语 不会再一个单词之间分开 如果是有换行或空格 浏览器hi认为空格是两个单词的间隔 会在空格换行 默认水平可以溢出 竖直也可以溢出

超出的部分全部隐藏 overflow: hidden;
竖直方向有滚动条 水平方向也有滚动条 overflow: scroll;
竖直方向有滚动条 水平方向也有滚动条 overflow-x: scroll;
竖直方向有滚动条 水平方向也有滚动条 overflow-y: scroll;