Estique o texto para caber na largura do div

Eu tenho um div com uma largura fixa, mas o texto dentro do div pode mudar.

Existe uma maneira de definir, com css ou outro, o espaçamento entre as letras para que o texto sempre preencha perfeitamente o div?

Como Mark disse, text-align:justify; é a solução mais simples. No entanto, para texto curto, não terá nenhum efeito. O seguinte código jQuery estende o texto para a largura do contêiner.

Ele calcula o espaço para cada caractere e define o letter-spacing maneira que o texto se estenda até a largura do contêiner .

Se o texto for muito longo para caber no contêiner, ele permite que ele se expanda para as próximas linhas e defina text-align:justify; ao texto.

Aqui está uma demonstração:

 $.fn.strech_text = function(){ var elmt = $(this), cont_width = elmt.width(), txt = elmt.html(), one_line = $('' + txt + ''), nb_char = elmt.text().length, spacing = cont_width/nb_char, txt_width; elmt.html(one_line); txt_width = one_line.width(); if (txt_width < cont_width){ var char_width = txt_width/nb_char, ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; one_line.css({'letter-spacing': ltr_spacing}); } else { one_line.contents().unwrap(); elmt.addClass('justify'); } }; $(document).ready(function () { $('.stretch').each(function(){ $(this).strech_text(); }); }); 
 p { width:300px; padding: 10px 0;background:gold;} a{text-decoration:none;} .stretch_it{ white-space: nowrap; } .justify{ text-align:justify; } .one{font-size:10px;} .two{font-size:20px;} .three{font-size:30px;} .four{font-size:40px;} .arial{font-family:arial;} 
  

Stretch me

Stretch me

Stretch link

I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.

Stretch me

Stretch me

Stretch me

Don't stretch me

Isso pode ser feito com o text-align:justify e um pequeno hack. Veja aqui: http://codepen.io/aakilfernandes/pen/IEAhF/

O truque é adicionar um elemento depois do texto que finge ser uma palavra muito longa. A palavra falsa é na verdade um elemento span com display:inline-block e width:100% .

No meu exemplo, a palavra falsa está em vermelho e tem uma altura de 1em, mas o hack vai funcionar mesmo sem ele.

Talvez isso possa ajudar:

 text-align:justify; 

Até mesmo o método HTML / CSS mais fácil seria usar o flexbox. Também é imediatamente responsivo. Mas o SEO digno de nota não vai pegá-lo se você usá-lo como um h1 ou algo assim.

HTML:

 
H
e
l
l
o
&nbsp
W
o
r
l
d

CSS:

 .wrapper{ width: 100%; text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-between; border: 1px solid black; } 

jsfiddle aqui

Eu encontrei uma solução melhor para o texto mais curto que uma linha, sem qualquer js ou tag extra, apenas uma class.

 .stretch{ /* We got 2rem to stretch */ width: 5rem; /* We know we only got one line */ height: 1rem; text-align: justify; } .stretch:after{ /* used to stretch word */ content: ''; width: 100%; display: inline-block; } 
 
你好么
你好

MARÇO DE 2018 Se você está pousando nesta questão em um momento mais atual …

Eu estava tentando fazer o que o OP perguntou sobre, mas com uma única palavra e encontrei sucesso com o seguinte:

1. Use um e defina css: span { letter-spacing: 0px; display:block} span { letter-spacing: 0px; display:block} (isso torna o elemento tão amplo quanto o conteúdo)

2. Na captura de carga, a largura do intervalo let width = $('span').width();

3. Capture o comprimento da extensão let length = $('span').length;

4. Redefina a largura da extensão para o contêiner $('span').css({'width','100%'});

5. Capture a NOVA largura da extensão (ou apenas use a largura do container). let con = $('span').width();

6. Calcule e defina o espaçamento das letras para preencher o container $('span').css({'letter-spacing':(cont-width)/length})

Obviamente, isso pode ser convertido para usar baunilha js e é útil mesmo com a maioria dos estilos de fonte, incluindo fonts não mono-espaço.

Algumas das respostas acima funcionam bem, mas o texto tem que envolver com muitas div crianças
e é um monte de códigos extras.
O texto dentro do div deve estar limpo, então eu fiz isso com uma ajuda de JS.

 const words = document.querySelector(".words"), wordsArray = words.innerText.split("").map(e => " " == e ? "
&nbsp
" : "
" + e + "
"); words.innerHTML = wordsArray.join("");
 .words { width: 100%; text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-between; } 
 
This is the demo text

Eu acho que o que você está procurando é escalar.

Renderize sua fonte com uma resolução agradável que faça sentido e use JS para estendê-la ao contêiner usando transformações CSS:

 transform: scale(1.05); 

Os benefícios disso são que seu texto sempre será inteligente, mas você se depara com o problema de tornar-se pequeno demais para ser legível.

Nota rápida é que você precisa fazer com que o elemento que você está tentando encolher / expandir tenha uma posição absoluta:

 position: absolute; 

Então, ainda mordiscando as bordas desse problema, se você combinar a resposta do wener que estica linhas curtas de texto com essa sugestão de usar um elemento real de outro thread, você pode fazer a coisa toda sem precisar de :after pseudo class.

Você está substituindo em um elemento real e colocando depois daquele que você quer justificar. E isso acionará o alinhamento de justificar da mesma maneira:

 header { background-color: #ace; text-align: justify; } .hack { display: inline-block; width: 100%; } 
 
A line of text to justify

binding jsfiddle

Para uma solução puramente HTML / CSS, mesmo para textos mais curtos (curta o suficiente

 text-align: justify; 

não funcionaria)

Eu segui este ótimo post como uma inspiração e coloquei cada letra dentro de um div

HTML:

 
H
e
l
l
o
&nbsp
W
o
r
l
d

CSS:

 .wrapper { width: 300px; /*for example*/ border: 1px solid gray; /*only for demonstrative purposes*/ text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } .letters { vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 }