如何使字体大小适应字符长度 [英] How to make font size adapt to character length

问题描述

如何让段落的字体大小自动适应div的空间取决于字符的长度？

示例1

  p {
 font-size：15px; 
} 
 
< div class =caption> 
 
 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Amet，quis。< / p> 
< / div> 
  

因为该段落的字符长度很长，所以字体大小只是 10px 。

如果这样

 < div class =caption> 
< p> Lorem< / p> 
< / div> 
  

字体大小为 20px ，因为该段落的字符长度很短。

解决方案

CSS vw和vh单位允许根据视图宽度和视图高度来调整大小浏览器。以下是关于视图高度和视图宽度单位的不错文章： https://css-tricks.com / viewport-sized-typography /

尝试使用这个例子：

  h1 {
 font-size：5.9vw; 
} 
 h2 {
 font-size：3.0vh; 
} 
 p {
 font-size：2vmin; 
} 
  

另外我不确定这是否适用于在div内缩放文本。上面的解决方案关于作为浏览器窗口大小的视口。如果你想它为一个div工作，我会建议使用JavaScript，因为我怀疑css是在它自己的工作。
您可以使用它来扩展文本： TextFit

总结

如果您希望文本大小取决于浏览器窗口宽度，请使用第一个给定的解决方案。在CSS中使用vh和wh单位。


如果要根据容器宽度调整字体大小，请在计算中使用javascript或使用给定的工具：TextFit

How to make font size on paragraph automatically adapt to space of div depend on the length of character?

Example 1

p{
 font-size:15px;
}

<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, quis.</p>
</div>

Because the character length of that paragraph is long the font size will be just 10px.

If like this

<div class="caption">
<p>Lorem</p>
</div>

The font size will be 20px because the character length of that paragraph is short.

解决方案

CSS vw and vh units allow to resize depending on the view width and view height of the browser. Here is a nice article about view height and view width units : https://css-tricks.com/viewport-sized-typography/

Try using this for example:

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Also I am unsure if this works for scaling text inside a div. The solution above works concerning the viewport which is the size of the window of the browser. If you want it to work for a div I would suggest using javascript since I doubt css works on it's own. You can use this for the text to scale : TextFit

To summerize

If you want the text size to depend on the browser window width use the first given solution. Using vh and wh units in CSS.
If you want to resize font size depending on a container width, use javascript with calculation or use the given tool : TextFit

这篇关于如何使字体大小适应字符长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！