html - 我可以单独使用 CSS 使我的标题字体大小取决于对象的宽度吗？

Question

如前所述，这是用于电子邮件模板，可在 gmail、yahoo mail、Mail(ios 应用程序)等电子邮件客户端中读取。因此。我不能使用 jQuery，@media 查询被剥离，类也被剥离。

所以我有一个固定的字体大小，但因为在手机上的 gmail 上宽度较小，很多时候文本被包装成 2 行。 我想要做的是使用宽度相关的字体大小。 所以我尝试的是像这样使用 vw:

 <p style="font-family: 'Lato', sans-serif; font-size: 2.5vw;font-weight: bold;line-height: 34px; padding: 0 5%; margin: 5% 0 0 0; color: #24b646;">
        {{title}}
    </p>
</td>

我的问题是，即使我的主视图的最大宽度为 640 像素。为了设置它在所有宽度上计算的字体大小。

所以这有一个奇怪的效果。即使View本身是640px，因为TAB变大了，文字变大了

来自:

收件人:

是否有可能使 vw 使用父级的宽度作为因变量？如果没有，我还能使用什么，以便字体大小严格取决于它的父级？ (640px - PC 的最大宽度，或移动设备的最大宽度)

Answer 1

不幸的是，它似乎在 CSS 中是不可能的。看看这两个问题:

• Font size auto adjust to fit

• Auto-size dynamic text to fill fixed size container .

那里提供的解决方案使用无法在电子邮件客户端中运行的 JavaScript。但一个可能的解决方法是将文本写入 svg 图像并对其进行缩放(尽管通常文本应作为文本包含在内)。

CSS Tricks解释了一些字体大小选项，最后一个可能是您正在寻找的选项(使用 svg-text)。