cortar texto muito longo dentro do div

86 
<div style="display:inline-block;width:100px;">

very long text
</div>

qualquer maneira de usar css puro para cortar o texto que é muito longo ao invés de mostrar na próxima linha e mostrar no máximo 100px

html css cometta
fonte

Respostas:

56 
<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

Esta é uma abordagem possível que posso pensar

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

Desta forma, o texto longo ainda será quebrado, mas não ficará visível devido à overflowconfiguração e, ao definir o line-heightmesmo height, garantimos que apenas uma linha será exibida.

Veja a demonstração aqui e uma boa descrição da propriedade de estouro com exemplos interativos.

Davor Lucic
fonte
1
Eu não contaria com "altura da linha" para evitar quebra de linha porque é possível que o usuário tenha alterado suas configurações de fonte (para texto menor) no navegador. Da mesma forma para fontes grandes, se você fixou a altura do div para o número de pixels, isso poderia parecer terrível. Especialmente com navegadores móveis e telas "retina", eu tentaria deixar a altura do div flexível se o layout do design permitir - o que deveria!
PJ Brunet
155

Você pode usar:

overflow:hidden;

para ocultar o texto fora da zona.

Observe que pode cortar a última letra (portanto, uma parte da última letra ainda será exibida). Uma maneira mais agradável é exibir reticências no final. Você pode fazer isso usando text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
Arseni Mourzenko
fonte
white-space: nowrap não é realmente necessário porque tenho várias linhas mostrando um longo caminho de arquivo. Sem o espaço em branco, o longo caminho inquebrável obterá reticências e, em seguida, a próxima linha mostrará o restante do caminho. O kicker é que posso copiar o texto (incluindo reticências) e, em seguida, colarei todo o caminho. Agradável!
Robert Koch
Caso você esteja se perguntando (como eu), reticências não funcionam em versões anteriores do Firefox. "Desde o Firefox versão 7 text-overflow: reticências são suportadas." stackoverflow.com/questions/5990414/…
PJ Brunet
e se você gostaria de ter uma dica ao passar o mouse para exibir o texto completo ou algo semelhante?
pedrorijo91
2
@ pedrorijo91 Você pode simplesmente usar title="full text goes here"no html.
Jerry
9

Por que não usar unidades relativas?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Tomas Macek
fonte
4

O código abaixo irá ocultar seu texto com largura fixa que você decidir. mas não muito adequado para designs responsivos.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Atualizar

Percebi em dispositivo (s) (móvel) que o texto (misto) entre si devido a (largura fixa) ... então eu editei o código acima para ficar oculto responsivamente da seguinte forma:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

A (largura máxima) garante que o texto será oculto responsivamente, seja qual for o (tamanho da tela) e não será misturado entre si.

Jogos Mizo
fonte
3
Embora este código possa responder à pergunta, fornecer contexto adicional sobre por que e / ou como este código responde à pergunta melhora seu valor a longo prazo.
Pato Donald
1 

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }
<div class="cut_text">

very long text
</div>
Expandir snippet

Supriya
fonte