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

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

28

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

— s1ntez
fonte

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