First of all
Your premise is incorrect, your text does not fit in div
. Your choice of letters may have given this illusion, see a better example:
#papel {width: 150mm;height: 30mm;border:1px solid red}
#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;}
<div id="papel">
<span>ÇÃj</span>
</div>
Changing the behavior of span
and of div
An alternative is to let the row size div (or the row size div) become equal.
Also, if you want more control, you better treat the span
as a block.
#papel {width: 150mm;border:1px solid red}
#papel span{display:block;font-size: 19vw;border:1px solid green;font-family:Arial;}
<div id="papel">
<span>RES ÇÃj</span>
</div>
Defining height with line-height
If you want to ignore the accents and the letters that go past the baseline, as left in the comment, you can adjust the line size of the div:
#papel {width: 150mm;height:30mm;border:1px solid red;overflow:hidden}
#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;line-height:30mm}
<div id="papel">
<span>RES ÇÃj</span>
</div>
If, in the example above you do not want to cut the seats completely, remove the overflow:hidden
.
#papel {width: 150mm;height:30mm;border:1px solid red}
#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;line-height:30mm}
<div id="papel">
<span>RES ÇÃj</span>
</div>
Note that what is valid in these last two examples is exactly the line-height
, causing the source to align to the space that has, thus, what "leak" (or what is cut) will not interfere in the spaces of the neighboring elements.
Note: I think the easiest thing would be to simply specify the height of the source in millimeters even, I don’t know if it makes any sense to use vw
for paper measurements.
You set the div to a size where the text does not fit.
– Bacco
Extamante... note that the text "fits" in the DIV, the problem is the border that an element generates... I need the text to occupy the maximum space in my DIV.
– user11699
It’s not just reducing the font size? =/
– Pedro Camara Junior
No, it does not fit. Only you use an accent or a "gjy" that will understand.
– Bacco
I understand... is there a way to remove these edges? Msm cutting accents rs
– user11699
Yes. First zeroing padding and margin, and then setting the div to the same height as the line, or even setting nothing, letting it adapt.
– Bacco