gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:24:13 25 4
gpt4 key购买 nike

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

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

Correct format at 100% scale

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

Strange format at minimalized scale

这是有同样问题的短代码:

<!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>

最佳答案

出现这种情况的原因

图标和文本在一个按钮内,您可以想象它们就像文本一样处理:如果当前行中没有足够的空间,则保留当前行中的内容并开始新的内容 - 就像在文本编辑器。但在您的情况下,它还会使按钮内的内容居中。

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

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

更改 320px20rem从容器的宽度。

几年前,pixel 是正确的选择,但很多事情都变了,rem 现在是更好的选择。

深入了解 px 和 rem 之间的区别,您可以在此处阅读,但公认的答案来自 2012 年,第二个答案是最新的,更适用于当今的网站编程:Should I use px or rem value units in my 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>

关于html - 在浏览器中将页面缩放到最小时出现文本问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58153919/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com