Font-size: Leave a font 100% of the size of the DIV

Navigation
5

I'm creating banners for printing and I came across a problem.

I need to set a fixed div and height div, for example: 

#papel {width: 297mm;height: 210mm;border:1px solid red}

Within this div, I have a SPAN 

#papel span{font-size: 9vw;border:1px solid red;font-family:Arial;}

The problem is this: My text fits inside the DIV, but the element generates a border around my text, coming out of the DIV.

Is there a way for my Span to occupy 100% of the DIV? I would like the text to occupy every space of the DIV without overtaking it with the border.

Following is a sample code for demonstration: 

#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>RES</span>
</div>

Thank you in advance = D

    
asked by anonymous 16.05.2016 / 22:41

2 answers

8

First and foremost

Your premise is incorrect, your text does not fit in div . Your choice of lyrics 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 div

An alternative is to leave the div of the size of the line (or the line of the size of the div), so that they are the same.

In addition, if you want greater control, better treat 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>


Setting height with line-height

If you want to ignore accents and letters that pass from baseline as left in the comment, you can hit the div line size: 

#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 above example you do not want to cut the accents completely, take out 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 font to align to the space it has, so what "leaking" (or what is cut) will not interfere in the spaces of the neighboring elements.

  

Note: I think the easiest thing is to simply specify the height of the font in millimeters, I do not know if it makes sense to use vw for paper measurements.

    
16.05.2016 / 22:48
2

In this case it's just you set the height to 100% and swap the span for a div 

#papel {width: 150mm;height: 30mm;border:1px solid red;}

#papel div{font-size: 16vw;border:1px solid green;font-family:Arial; height: 100% }
<div id="papel">
	<div>RES</div>
</div>
    
16.05.2016 / 23:03
Why can not we return a void call on a method that expects void return? Error using phpMailer class