时间戳

首页 > 解决方案 > 在浏览器中将页面缩放到最小时出现文本问题

html - 在浏览器中将页面缩放到最小时出现文本问题

问题描述

将页面缩放到最小时，文本显示不正确。这是此页面的URL 。

默认比例的页面 - 100%（文本正确显示）。

100% 比例的正确格式

页面最小比例 - 25%（文本显示不正确）。

最小规模的奇怪格式

这是具有相同问题的短代码：

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE>thisistest</TITLE>
 </HEAD>
 <BODY>

  <DIV style='width:180px;background-color:gray;font-size:small;'>
   thisistest thisistest thisistest
  </DIV>

 </BODY>
</HTML>

标签： htmlcss

解决方案

发生这种情况的原因

图标和文本位于一个按钮内，您可以将其想象为将它们视为文本：如果当前行中没有足够的空间，则将当前内容保留在该行中并开始一个新内容 - 就像在文本编辑器中一样. 但是在您的情况下，它还将按钮内的内容居中。

<button style="text-align: left">会将图标和所有内容保留在左侧。

备选方案 2 - 如果你想保持比例

从容器的宽度更改为320px。20rem

几年前，pixel 是正确的选择，但很多事情发生了变化，rem 现在是更好的选择。

深入了解 px 和 rem 之间的区别，您可以在此处阅读，但接受的答案来自 2012 年，第二个答案是最新的，更适用于当今的网站编程：我应该在我的网站中使用 px 还是 rem 值单位CSS？

另一个解决方法是

另一个选项是您组织按钮内的空间。像这样：

<button>
    <div style="float:left">
       <img src="images/agreement.svg" style="width:12px;vertical-align:middle;">
    </div>
    <div style="float: left">
        <ii style="vertical-align:middle;">пользовательское соглашение</ii>
    </div>    
</button>

但是，如果您的语言（例如您的情况）的单词长于可用空间，则此方法效果不佳。这个词只会从第二行开始，因为第一行没有空格。

button {
  width: 400px;
  font-size: 36px;
}
<button>SomeReallyLongWordThatCannotBeContainedInASingleLine</button>

但是长词也可以通过 CSS 像这样分解：

为此使用自动换行。

button {
  width: 400px;
  font-size: 36px;
  word-wrap: break-word;
  overflow-wrap: break-word
}
<button>SomeReallyLongWordThatCannotBeContainedInASingleLine</button>

推荐阅读