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

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"

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

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]%).

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.

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

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

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;
}

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

demonstração

Você acabou de adicionar uma linha css:

.app a {
   display: inline-block;
}

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>

Deve conter

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

NÃO DEVE conter

display: inline

Deve conter

position: sticky

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

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>

Este é o código que permite que:

overflow: hidden;
text-overflow: ellipsis;

estouro: oculto é necessário

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;
  }
}

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.

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;