5

Estou criando banners para impressão e me deparei com um problema.

Preciso definir uma div de height e widht fixos, por exemplo:

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

Dentro desta div, tenho um SPAN

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

O problema, é o seguinte: O meu texto cabe dentro da DIV, porém o elemento geram uma borda em volta do meu texto, saindo da DIV.

Há uma forma do meu Span ocupar 100% da DIV ? Gostaria que o texto ocupasse todo espaço da DIV sem ultrapassa-la com a borda.

Segue codigo siples para demonstração:

#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>

Agradeço desde já =D

6
  • Você definiu a div de um tamanho em que o texto não cabe.
    – Largato
    Commented 16/05/2016 às 20:45
  • Extamante... note que o texto "cabe" na DIV, o problema é a borda que um elemento gera... Preciso que o texto ocupe o maximo de espaço em minha DIV.
    – user11699
    Commented 16/05/2016 às 20:55
  • Não é só diminuir o tamanho da fonte? =/ Commented 16/05/2016 às 20:55
  • Não, ele não cabe. Só você usar um acento ou um "gjy" que vai entender.
    – Largato
    Commented 16/05/2016 às 20:55
  • Entendo... há uma forma de remover essas bordas? Msm cortando acentos rs
    – user11699
    Commented 16/05/2016 às 20:57

2 Respostas 2

8

Antes de mais nada

Sua premissa está incorreta, seu texto não cabe na div. Sua escolha de letras pode ter dado esta ilusão, veja um exemplo melhor:

#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>


Mudando o comportamento do span e da div

Uma alternativa é deixar a div do tamanho da linha (ou a linha do tamanho da div), de forma a ficarem iguais.

Além disso, se quer um controle maior, melhor tratar o span como bloco.

#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>


Definindo altura com line-height

Se quiser ignorar os acentos e as letras que passam da baseline, conforme deixado no comentário, pode acertar o tamanho da linha da 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>

Se, no exemplo acima não quiser cortar os acentos totalmente, tire o 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 que o que está valendo nestes últimos dois exemplos é exatamente o line-height, fazendo com que a fonte se alinhe para o espaço que tem, assim, o que "vazar" (ou o que for cortado) não vai interferir nos espaços dos elementos vizinhos.

Nota: Eu acho que o mais fácil mesmo seria simplesmente especificar a altura da fonte em milímetros mesmo, não sei se faz algum sentido usar vw pra medidas em papel.

2
  • É verdade que vw não é muito útil para fonte. Mas se for necessário um tamanho relativo, uma unidade bastante comum é em Commented 17/05/2016 às 12:06
  • Eu ia responder justamente sobre isso na outra pergunta, nem imaginava que você tinha até desenhado, principalmente o ç,j,q,g, etc, parabéns e obrigado pelo empenho! +1
    – Syzoth
    Commented 17/01/2017 às 21:00
2

Neste caso é só você definir a altura para 100% e trocar o span por uma 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .