CSS metin taşması: üç nokta; çalışmıyor?

Bu basit CSS'nin neden çalışmadığını bilmiyorum ...

.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>

4. "Test" etrafında kesilmelidir

text-overflow:ellipsis; yalnızca aşağıdakiler geçerli olduğunda çalışır:

• Öğenin genişliği px(piksel) olarak sınırlanmalıdır . Genişlik %(yüzde) çalışmaz.
• Elemanın olması overflow:hiddenve white-space:nowrapayarlanması gerekir .

Burada sorun yaşamanızın nedeni, widthöğenizin akısıtlanmamasıdır. Bir widthayarınız var, ancak öğe display:inline(varsayılan olarak) olarak ayarlandığından, onu yok sayıyor ve başka hiçbir şey genişliğini kısıtlamıyor.

Aşağıdakilerden birini yaparak bunu düzeltebilirsiniz:

• Öğeyi display:inline-blockveya olarak ayarlayın display:block(muhtemelen birincisi, ancak düzen gereksinimlerinize bağlıdır).
• Kap öğelerinden birini ayarlayın display:blockve bu öğeye sabit widthveya max-width.
• Elemanı float:leftveya olarak ayarlayın float:right(muhtemelen birincisi, ancak yine, her ikisi de üç nokta söz konusu olduğunda aynı etkiye sahip olmalıdır).

Öneririm display:inline-block, çünkü bunun düzeniniz üzerinde minimum teminat etkisi olacaktır; display:inlineşu anda yerleşim söz konusu olduğunda kullandığı gibi çalışır , ancak diğer noktalarla da deney yapmaktan çekinmeyin; Bu şeylerin birlikte nasıl etkileştiğini anlamanıza yardımcı olmak için mümkün olduğunca fazla bilgi vermeye çalıştım; CSS'yi anlamanın büyük bir kısmı, çeşitli stillerin birlikte nasıl çalıştığını anlamakla ilgilidir.

İşte display:inline-blocksize ne kadar yakın olduğunuzu göstermek için kodunuzla birlikte eklenen bir pasaj .

.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>

Yararlı referanslar:

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

Kabul edilen cevap harika. Ancak, yine de %genişliği kullanabilir ve elde edebilirsiniz text-overflow: ellipsis. Çözüm basit:

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

Her ne zaman kullanırsanız kullanın calc, son değer mutlak piksel olarak işlenir ve sonuç olarak bir genişlik kapsayıcısı 80%gibi 800pxbir 1000pxşeye dönüşür. Bu nedenle kullanmak yerine width: [YOUR PERCENT]%kullanın width: calc([YOUR PERCENT]%).

Bu soruya ulaşırsanız, çünkü üç noktaya bir display: flexkabın içinde çalışmasını sağlamakta sorun yaşıyorsanız , min-width: 0zaten bir tane ayarlamış olsanız bile üst öğesinden taşan en dıştaki kaba eklemeyi deneyin overflow: hiddenve bunun sizin için nasıl çalıştığını görün.

Daha fazla ayrıntı ve aj-foster tarafından bu kod alanında çalışma örneği . Benim durumumda tamamen hile yaptı.

Ayrıca IE10 ve altı word-wrapiçin normal olarak ayarlandığından emin olun .

Aşağıda belirtilen standartlar bu özelliğin davranışını "text-wrap" özelliğinin ayarına bağlı olarak tanımlar. Ancak, Internet Explorer "metin sarma" özelliğini desteklemediğinden, wordWrap ayarları Windows Internet Explorer'da her zaman etkilidir.

Bu yüzden benim durumumda, FF ve Chrome'da çalışmasına neden olan kesme sözcüğü (devralınmış veya varsayılan olarak?) Olarak word-wrapayarlandı , ancak IE'de değil.text-overflow

word-wrap özelliği hakkında MS bilgisi

anchor, span... etiketleri varsayılan olarak satır içi öğelerdir , Satır içi öğeler durumunda widthözellik çalışmaz. Bu nedenle, öğenizi inline-blockveya block levelöğelere dönüştürmeniz gerekir

Üç noktadan çalışması için bilgiden sonra yazılan dört satırı ekleyin

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

Ekle display: block;veya display: inline-block;listenize#User_Apps_Content .DLD_App a

gösteri

Sadece bir satır css ekleyin:

.app a {
   display: inline-block;
}

In bootstrap 4 , bir ekleyebilir .text-truncateüç nokta ile metni kesecek sınıfı.

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

İçermek zorundadır

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

İçermemelidir

display: inline

Içermelidir

position: sticky

Şamandıra da ekleyebilirsiniz: sol; bu sınıfın içinde #User_Apps_Content .DLD_App a

Duyarlı olurken bazı uzun açıklamalar elips (sadece bir şerit almak) yapmak zorunda kaldım, bu yüzden benim çözümüm metin kaydırma (yerine white-space: nowrap) izin ve sabit genişlik yerine sabit yükseklik ekledi:

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>

Bu, aşağıdakilere izin veren koddur:

overflow: hidden;
text-overflow: ellipsis;

taşma: gizli gerekli

Aynı sorunla karşılaştım ve yukarıdaki çözümlerin hiçbiri Safari için çalışmıyor gibi görünüyor. Safari olmayan tarayıcı için bu iyi çalışır:

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

Safari için bu benim için işe yarıyor. Tarayıcının Safari olup olmadığını kontrol etmek için medya sorgusunun zamanla değişebileceğini unutmayın, bu nedenle sizin için çalışmazsa medya sorgusuyla uğraşın. İle line-clampmülkiyet, o da üç nokta ile web birden fazla satır olması mümkün olacağını görmek burada .

// 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

İtibar nedeniyle yorum yapamıyorum, bu yüzden başka bir cevap veriyorum:

Bu durumda, genel olarak önerilen display: block;özelliği, text-overflow: ellipsis;açık ayarladığınız öğeden kaldırmanız gerekir veya sonunda ... olmadan kesilir.

Bunları css kuralınıza yazın.

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