Taşma: sonunda gizli noktalar

206

Diyelim ki " Büyük izmaritleri severim ve yalan söyleyemem " bir dizem var ve onu kestim overflow:hidden, bu yüzden şöyle bir şey gösteriyor:

Büyük izmaritleri severim ve yapamam

metni kesme. Bunu şu şekilde görüntülemek mümkün mü:

Büyük izmaritleri severim ve yapamam ...

CSS mi kullanıyorsunuz?

html css

— mannicken
kaynak

47

Bu soru şarkıyı tanıtmak için bir neden mi?

— Cyril Gupta

12

@CyrilGupta Geç cevap verdiğim için üzgünüm. Tuvalete koşmak zorunda kaldım. Sorunuzu cevaplamak için ... Evet

— Joe Phillips

1

Olası yinelenen Ben gizli taşma ile süre içinde nokta ( "...") nasıl gösterilebilir??

— Termininja

283

Metin taşmasını kullanabilirsiniz : üç nokta; hangi caniuse göre tüm büyük tarayıcılar tarafından desteklenmektedir.

İşte jsbin hakkında bir demo .

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

Snippet'i genişlet

— Joe Phillips
kaynak

Bu Firefox 15.0.1 iş gibiydi: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

Evet, yeni sürümlerde çalışıyor gibi görünüyor. Açıkçası bu cevap bu noktada birkaç yaşında.

— Joe Phillips

Firefox, 2011'in ikinci yarısında yayınlanan 7 sürümünden itibaren bunu desteklemeye başladı.

— Richard Ev

1

Bu cevabın oylara ve yorumlara dayanarak "doğru" olduğunu söylemek için sağduyumu kullanabilirim. Ancak, gerçekte bu cevabın nasıl "doğru" olduğunu göremiyorum. Her ikisini de overflow: hidden;ve text-overflow: ellipsis;bir elemanda (yani, bir blok elemanı) kullandım ve ...sonunda hayır buldum (elbette taştığından eminim). Ayrıca olmadan bu denenmiş overflow: hidden;parçası ve aynı zamanda bir ile iç eleman eleman eleman vardı overflow: hidden;ve vardı text-overflow: ellipsis;ben denemek nasıl olursa olsun, bu .. bir fail olduğunu

— VoidKing

2

Sanırım problemi biliyorum. Ben ayarlayamadı max-heightböylece taşma kısıtlamak için çalışıyorumwhite-space:nowrap

— VoidKing

89

Sorununuz için aşağıdaki kod parçasını kontrol edin

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>

Snippet'i genişlet

— Arjun
kaynak

4

up "beyaz boşluk: nowrap;" bazı durumlarda gerekli olabilir

— leo

2

metnin nasıl 2 satır görüntülenmesi için kaybolur?

— Martian2049

1

@ Matian2040 sabit yükseklik ve taşma gizli stilleri vererek ayarlayabilirsiniz, bu keman kontrol jsfiddle.net/5135L4bx

— Arjun

1

Ah anlıyorum. denedim. Ancak iki satır gibi görünüyor ... sonunda bir olmayacak?

— Martian2049

1

display: inline-block;benim için eksik olan bileşen. Teşekkür ederim.

— Seth

18

Çizgileri 3'e kadar sınırlamak istiyorsanız bunu deneyin ve üç çizgiden sonra noktalar görünecektir. Çizgileri artırmak istiyorsak, sadece -webkit-line-clamp değerini değiştirin ve div boyutu için genişlik verin.

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

— Nagendra Matala
kaynak

özür dilerim, kelimelerinizi nasıl böyle çıkardığımdan emin değilim!

— Alec

Chrome'da harika çalışıyor, ancak bunun Firefox'ta çalışmadığını unutmayın

— Ken Bigler

Bunu başka bir tarayıcıda nasıl yapabilirim, örneğin Firefox? Düzenleme: stackoverflow.com/questions/33058004/…

— user3187724

17

Umarım sizin için yararlıdır:

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

Snippet'i genişlet

— Vu Phan
kaynak

15

Evet, text-overflowCSS 3'teki özellik aracılığıyla . Uyarı: tarayıcılarda henüz evrensel olarak desteklenmemektedir.

— ceejayoz
kaynak

3

Tarayıcı desteği şu anda Şubat 2012 itibariyle oldukça iyi durumda. Bkz. Caniuse.com/#search=text-overflow

— Simon East

1

Ah, bu sorunun üç yıl sonra ortaya çıkmasının nedeni sensin.

— Bay Lister

8

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: 190px;">
  I like big butts and I cannot lie
</span>

Snippet'i genişlet

— Penny Liu
kaynak

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
kaynak

4

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

3

Çoğu çözüm burada statik genişlik kullanır. Ancak bazı nedenlerden dolayı bazen yanlış olabilir.

Örnek: Çok sütunlu bir masam vardı. Çoğu dar (statik genişlik). Ancak ana sütun mümkün olduğunca geniş olmalıdır (ekran boyutuna bağlıdır).

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
kaynak

-1

yüklendiğinde metni gizle ve üzerine gelindiğinde göster

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