Estouro: pontos ocultos no final

205

Digamos que eu tenho uma string " Eu gosto de bundas grandes e não posso mentir " e eu a corto overflow:hidden, para exibir algo assim:

Eu gosto de bundas grandes e não posso

cortando o texto. É possível exibir isso assim:

Gosto de bundas grandes e não posso ...

usando CSS?

html css

— amadurecer
fonte

46

Esta pergunta é um ardil para promover a música?

— Cyril Gupta

12

@CyrilGupta Desculpe pela resposta tardia. Eu tive que correr para o banheiro. Para responder sua pergunta ... Sim

— Joe Phillips

1

Possível duplicata de Como posso mostrar pontos ("...") em um intervalo com estouro oculto?

— Termininja

282

Você pode usar excesso de texto: reticências; que de acordo com o caniuse é suportado por todos os principais navegadores.

Aqui está uma demonstração do jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

Expandir snippet

— Joe Phillips
fonte

Isso pareceu funcionar no Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

Sim, parece funcionar em versões mais recentes. Obviamente, essa resposta tem alguns anos neste momento.

— 9788 Joe JR Phillips

O Firefox começou a suportar isso a partir da versão 7, lançada na segunda metade de 2011.

— Richard Ev

1

Posso usar meu bom senso para dizer que esta resposta é "correta" com base nos votos e comentários. No entanto, não vejo na realidade como essa resposta é "correta". Eu usei ambos overflow: hidden;e text-overflow: ellipsis;em um elemento (ou seja, um elemento de bloco) e não encontrei nenhum ...no final (é claro que estou me certificando de que ele esteja realmente transbordando). Eu também tentei isso sem a overflow: hidden;parte, e também com um elemento dentro do elemento onde o elemento tinha overflow: hidden;eo tinha text-overflow: ellipsis;Não importa o quanto eu tente, esta é uma falha ..

— VoidKing

2

Bem, acho que conheço o problema. Eu estou tentando para restringir o excesso com base em max-height, então não posso ter white-space:definido paranowrap

— VoidKing

88

Verifique o seguinte trecho para o seu problema

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Expandir snippet

— Arjun
fonte

4

up's para adicionar "espaço em branco: nowrap;" o que pode ser necessária em alguns casos

— leo

2

como fazer o texto exibir 2 linhas e desaparecer?

— Martian2049

1

@ Matian2040 você pode ajustar, dando altura fixa e transbordamento escondido estilos, verifique este violino jsfiddle.net/5135L4bx

— Arjun

1

Ah eu vejo. eu tentei. no entanto, parece que duas linhas significam que não haverá um ... no final?

— precisa saber é o seguinte

1

display: inline-block;foi o componente que faltava para mim. Obrigado.

— Seth

18

Tente fazer isso se desejar restringir as linhas até 3 e após três linhas os pontos aparecerão. Se quisermos aumentar as linhas, apenas altere o valor -webkit-line-clamp e forneça a largura para o tamanho da div.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

— Nagendra Matala
fonte

desculpas, eu não tenho certeza de como eu removi suas palavras assim!

— Alec

funciona muito bem no Chrome, mas nota que isso não vai funcionar no Firefox

— Ken Bigler

Como faço isso em outro navegador, digamos Firefox? Edit: stackoverflow.com/questions/33058004/…

— user3187724

17

Espero que seja útil para você:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

Expandir snippet

— Vu Phan
fonte

15

Sim, através da text-overflowpropriedade no CSS 3. Aviso: ainda não é universalmente suportado nos navegadores.

— ceejayoz
fonte

3

O suporte ao navegador é muito bom agora, a partir de fevereiro de 2012. Consulte caniuse.com/#search=text-overflow

— Simon East

1

Ah, você é a razão pela qual essa pergunta apareceu três anos depois.

— Sr. Lister

8

No bootstrap 4 , você pode adicionar uma .text-truncateclasse para truncar o texto com reticências.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

Expandir snippet

— Penny Liu
fonte

6

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

— Cuteboy_Max
fonte

3

A maioria das soluções usa largura estática aqui. Mas às vezes pode estar errado por alguns motivos.

Exemplo: eu tinha tabela com muitas colunas. A maioria deles é estreita (largura estática). Mas a coluna principal deve ser a mais larga possível (depende do tamanho da tela).

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

— Maju
fonte

3

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

— manoj patel
fonte

-1

ocultar texto ao carregar e mostrar ao passar o mouse

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }

— Rohit Parte
fonte