size responsive based on dynamic amount of characters

I know that this could be solved fairly easily with Javascript, but I'm only interested in a pure CSS solution.

I want a way to dynamically resize text so that it always fits into a fixed div. Here is the sample markup:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ and https://medium.com/design-ux/66bddb327bb1

CSS3 supports new dimensions that are relative to view port. But this doesn't work in android < 4.4

body
{
    font-size: 3.2vw;
}

see css-tricks.com/.... and also look at caniuse.com/....

or

Use media query .Simplest way is to use dimensions in % or em. Just change the base font size everything will change.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

Use dimensions in % or em . Just change the base font size everything will change. In previous one you could just change the body font and not h1 every time or let base font size to default of the device and rest all in em

see kyleschaeffer.com/.... for more info on em, px and %

You might be interested in the calc approach:

font-size: calc(4vw + 4vh + 2vmin);

done. Tweak values till matches your taste.

Source: https://codepen.io/CrocoDillon/pen/fBJxu

上一篇: 基于容器宽度的字体缩放

下一篇: 大小响应基于动态的字符数量