gpt4 book ai didi

css - 带有缩放功能的文本溢出容器(CMD +)

转载 作者:行者123 更新时间:2023-11-28 02:15:53 24 4
gpt4 key购买 nike

问题 = 使用缩放 (CMD +) 时文本溢出容器。

缩放前=

enter image description here

缩放后=

enter image description here

以下解决了它,但我非常不愿意接受 ViewPort 单元,因为所有当前浏览器都它们缺乏完整支持,更不用说旧版浏览器了:

html {
font-size: 16px;
font-size: 2.4vw;
}

ViewPort 单位的另一个更严重的问题是它们明显随窗口大小缩放,我不想那样做

我希望:(1) 随着窗口大小的调整,字体大小不会发生(2) ...但我确实希望字体大小减小,以便缩放时不会发生上述容器溢出。(3) 尽可能避免使用 Javascript 和 CSS @media 查询。

下面是合适的代码:

HTML -

    <div id="roundedTextCorners" class="centerBlockContents">
<div class="headerText">
MY VERY OWN GUARDIAN ANGEL!<p>

MY LOVE SONG FOREVER!!
</div>
</div>

CSS -

#roundedTextCorners {
border: 0.3125em #994c00 solid;
border-radius: 0.625em;

padding: 1.0em 1.0em 1.0em 1.0em;

background-color: #994c00;
color: #fff;
}

.centerBlockContents {
text-align: center;
}

.headerText {
font-family: Georgia, Helvetica;
font-size: 1.60em; /* at the top level */
color: #fff;

padding: 1.0em 1.0em 1.0em 1.0em;
}

有什么想法吗??

最佳答案

首先,感谢 Lister 先生与我一起应对这一挑战。

我最终决定了一个令我满意的“解决方案”。不可避免地,我决定 max-width 必须放在某个地方,要么在 <body> 中。或在 @media .我选择了@media因为我得出结论,比起 @media 固有的抖动,我更鄙视水平滚动条。 .

关于css - 带有缩放功能的文本溢出容器(CMD +),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48482368/

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