Estouro de texto CSS: reticências; não está funcionando?

368

Não sei por que esse CSS simples não está funcionando ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Deve ser interrompido em torno do quarto "teste"

ChristopherStrydom
fonte
relacionada stackoverflow.com/questions/802175/...
Adrien Seja
11
related: Aplicando reticências ao texto multilinha
Michael Benjamin
FF only- se filteraplicado, as reticências não serão renderizadas. erro aberto
vsync
11
Eu escrevi um post sobre como resolver problemas com text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow
Fausto NA
11
no meu caso, a remoção de display: Flex a partir do elemento ajudou
Eduard

Respostas:

909

text-overflow:ellipsis; só funciona quando o seguinte for verdadeiro:

  • A largura do elemento deve estar restrita em px(pixels). A largura em %(porcentagem) não funcionará.
  • O elemento deve ter overflow:hiddene white-space:nowrapdefinir.

A razão que você está tendo problemas aqui é porque a widthdo seu aelemento não é restrito. Você tem uma widthconfiguração, mas como o elemento está definido como display:inline(por exemplo, o padrão), ele está ignorando e nada mais está restringindo sua largura.

Você pode corrigir isso seguindo um destes procedimentos:

  • Defina o elemento como display:inline-blockou display:block(provavelmente o primeiro, mas depende das suas necessidades de layout).
  • Defina um de seus elementos de contêiner para display:blocke dê a ele um elemento fixo widthou max-width.
  • Defina o elemento como float:leftou float:right(provavelmente o primeiro, mas, novamente, qualquer um deve ter o mesmo efeito no que diz respeito às reticências).

Eu sugiro display:inline-block, pois isso terá o mínimo impacto colateral no seu layout; funciona muito parecido com o display:inlineque está usando atualmente no que diz respeito ao layout, mas fique à vontade para experimentar também os outros pontos; Tentei fornecer o máximo de informações possível para ajudar você a entender como essas coisas interagem; uma grande parte do entendimento de CSS é entender como vários estilos funcionam juntos.

Aqui está um trecho com seu código, com um display:inline-blockadicionado, para mostrar o quão perto você estava.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Referências úteis:

Spudley
fonte
12
E se eu não puder usar a largura definida devido ao design responsivo?
SearchForKnowledge
5
Observe que max-width também funciona. Isso me ajudou porque eu tinha um ícone que tinha que abraçar o final do texto, independentemente da largura do intervalo. (Caso contrário, o ícone será flutuando para a direita se o texto não ocupam toda a largura do span)
Kevin
2
Nota: white-space: nowrapna verdade não é necessário. Ainda podemos ver as elipses mesmo sem elas. Para várias linhas text-overflow, ver este SO
gfaceless
24
Não tenho certeza se é uma alteração recente ou não, mas no Chrome 50 (beta) você não precisa definir a largura como um valor de px - "100%" também funciona. white-space: nowrapé necessário.
Thdan # 14/16
13
Você não precisa definir um fixo width. Tudo que você precisa fazer é definir um white-space: nowrap;e ele funciona muito bem.
adamj
37

A resposta aceita é incrível. No entanto, você ainda pode usar a %largura e o alcance text-overflow: ellipsis. A solução é simples:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

Parece que sempre que você usa calc, o valor final é renderizado em pixels absolutos, que consequentemente se converte 80%em algo parecido 800pxcom um 1000pxcontêiner de largura. Portanto, em vez de usar width: [YOUR PERCENT]%, use width: calc([YOUR PERCENT]%).

Golfinho Supremo
fonte
16

Portanto, se você responder a essa pergunta porque está tendo problemas para tentar fazer as reticências funcionarem dentro de um display: flexcontêiner, tente adicionar min-width: 0ao contêiner mais externo que está transbordando seu pai, mesmo que você já o tenha definido overflow: hiddene veja como isso funciona para você.

Mais detalhes e um exemplo de trabalho sobre esse código, por aj-foster . Totalmente fiz o truque no meu caso.

Herick
fonte
2
Ótima solução - também é a única postada aqui que funciona para um position: stickyelemento dentro de um display: flexcontêiner.
James Dinsdale
2
Eu acho que deve ser incluído na resposta selecionada. Isso resolveu meu problema. Obrigado!
J0nd0n7
11
Senhor, você é um gênio.
Nathan Osman
11
obrigado cara, salvou o dia
Umbrella
7

Verifique também se word-wrapestá definido como normal no IE10 e abaixo.

Os padrões mencionados abaixo definem o comportamento dessa propriedade como dependente da configuração da propriedade "text-wrap". No entanto, as configurações do wordWrap sempre são eficazes no Windows Internet Explorer porque o Internet Explorer não oferece suporte à propriedade "quebra de texto".

Portanto, no meu caso, word-wrapfoi definido como quebra-palavra (herdada ou por padrão?), Causando text-overflowtrabalho no FF e no Chrome, mas não no IE.

informações de ms na propriedade quebra automática de linha

Tim Vermaelen
fonte
5

anchor, span... as tags são elementos embutidos por padrão, caso a widthpropriedade de elementos embutidos não funcione. Então você tem que converter seu elemento em um inline-blockou mais block levelelementos

santhoshkumar
fonte
5

Inclua as quatro linhas escritas após as informações para que as reticências funcionem

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
Manoj Selvin
fonte
2

Adicione display: block;ou display: inline-block;ao seu#User_Apps_Content .DLD_App a

demonstração

Bhojendra Rauniyar
fonte
Acabei de verificar e está cortando: /
SearchForKnowledge
2

Você acabou de adicionar uma linha css:

.app a {
   display: inline-block;
}
Sanjib Debnath
fonte
1

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: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Penny Liu
fonte
1

Deve conter

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

NÃO DEVE conter

display: inline

Deve conter

position: sticky
NVRM
fonte
0

Você também pode adicionar float: left; dentro desta classe #User_Apps_Content .DLD_App a

Shabbir Lakdawala
fonte
0

Eu tive que fazer algumas descrições longas elipse (pegue apenas uma pista) enquanto respondia, então minha solução foi deixar o texto quebrar (em vez de white-space: nowrap) e, em vez de largura fixa, adicionei altura fixa:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

T04435
fonte
0

Este é o código que permite que:

overflow: hidden;
text-overflow: ellipsis;

estouro: oculto é necessário

Max Alexander Hanna
fonte
0

Eu enfrentei o mesmo problema e parece que nenhuma das soluções acima funciona para o Safari. Para navegadores não-safari, isso funciona muito bem:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Para o Safari, este é o que funciona para mim. Observe que a consulta de mídia para verificar se o navegador é o Safari pode mudar com o tempo, portanto, basta mexer na consulta de mídia se ela não funcionar. Com a line-clamppropriedade, também seria possível ter várias linhas na web com reticências, veja aqui .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}
alextanhongpin
fonte
0

https://stackoverflow.com/a/53784508/5626747

Não posso comentar devido à reputação, por isso estou fazendo outra resposta:

Nesse caso, você também precisará remover a display: block;propriedade geralmente sugerida do elemento em que você ativou text-overflow: ellipsis;ou ela será cortada sem o ... no final.

nemkin
fonte
-1

Escreva-os na sua regra de css.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Siraj Alam
fonte
Você também pode verificar isso, jsfiddle.net/ManiAnand/5v6pfy9w
Mani Abi Anand
Se a largura pode ser especificada, a resposta não está errada. Tudo o que você acabou de adicionar ao bloco de exibição na minha resposta, escrevi um trecho, não os códigos completos, para que outras coisas possam ser adicionadas, mas não têm nada a ver com o problema! Você pode especificar como minha resposta não está correta?
Siraj Alam
11
A largura precisa ser especificada, assim como a exibição. Se a largura for uma porcentagem ou não especificada e não for definida como unidades rígidas, o excesso não será restringido e não funcionará. Veja a resposta aceita.
jlesse
A largura já foi definida pelo op. Dei um trecho para adicionar seus códigos #
Siraj Alam