Przepełnienie: ukryte kropki na końcu

205

Powiedzmy, że mam ciąg „ Lubię duże tyłki i nie mogę kłamać ” i przecinam je overflow:hidden, więc wyświetla coś takiego:

Lubię duże tyłki i nie mogę

odcinanie tekstu. Czy można wyświetlić to w ten sposób:

Lubię duże tyłki i nie mogę ...

używasz CSS?

html css

— mannicken
źródło

46

Czy to pytanie jest podstępem do promocji piosenki?

— Cyril Gupta

12

@CyrilGupta Przepraszamy za opóźnienie w odpowiedzi. Musiałem biec do łazienki. Aby odpowiedzieć na twoje pytanie ... Tak

— Joe Phillips

1

Możliwy duplikat Jak wyświetlić kropki („...”) w zakresie z ukrytym przepełnieniem?

— Termininja,

281

Możesz użyć przelewu tekstu: ellipsis; który według caniuse jest obsługiwany przez wszystkie główne przeglądarki.

Oto demo na 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>

Rozwiń fragment kodu

— Joe Phillips
źródło

Wydawało się, że działa w przeglądarce Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

Tak, wydaje się działać w nowszych wersjach. Oczywiście ta odpowiedź ma już kilka lat.

— Joe Phillips

Firefox zaczął obsługiwać to od wersji 7, która została wydana w drugiej połowie 2011 roku.

— Richard Ev

1

Mogę wykorzystać zdrowy rozsądek, by stwierdzić, że ta odpowiedź jest „właściwa” na podstawie głosów i komentarzy. Jednak nie widzę w rzeczywistości, w jaki sposób ta odpowiedź jest „właściwa”. Kiedyś oboje overflow: hidden;i text-overflow: ellipsis;w elemencie (czyli element bloku) i nie znaleziono ...na końcu (oczywiście mam upewniając się, że to rzeczywiście jest przepełniona). Próbowałem również tego bez overflow: hidden;części, a także z elementem wewnątrz elementu, w którym element miał overflow: hidden;i miał text-overflow: ellipsis;Bez względu na to, jak spróbuję, jest to

— porażka

2

Myślę, że znam problem. Próbuję ograniczyć przepełnienie na podstawie, max-heightwięc nie mogłem white-space:ustawić nanowrap

— VoidKing

88

Sprawdź następujący fragment kodu pod kątem swojego problemu

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>

Rozwiń fragment kodu

— Arjun
źródło

4

za dodanie „białych znaków: nowrap;” co może być potrzebne w niektórych przypadkach

— Leo

2

jak sprawić, by tekst wyświetlał 2 linie, a następnie zniknął?

— Martian2049,

1

@ Matian2040 możesz dostosować, podając stałą wysokość i przepełnienie ukrytych stylów, sprawdź to skrzypce jsfiddle.net/5135L4bx

— Arjun

1

rozumiem. próbowałem. jednak wydaje się, że dwie linie oznaczają, że nie będzie ... na końcu?

— Martian2049,

1

display: inline-block;był dla mnie brakującym elementem. Dziękuję Ci.

— Seth

18

Wypróbuj to, jeśli chcesz ograniczyć linie do 3, a po trzech liniach pojawią się kropki. Jeśli chcemy zwiększyć linie, po prostu zmień wartość -webkit-line-clamp i podaj szerokość dla rozmiaru div.

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

— Nagendra Matala
źródło

przepraszam, nie jestem pewien, jak usunąłem twoje słowa w ten sposób!

— Alec

działa świetnie w Chrome, ale pamiętaj, że to nie zadziała w przeglądarce Firefox

— Ken Bigler,

Jak to zrobić w innej przeglądarce, na przykład Firefox? Edycja: stackoverflow.com/questions/33058004/…

— user3187724

17

Mam nadzieję, że jest to pomocne dla Ciebie:

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

Rozwiń fragment kodu

— Vu Phan
źródło

15

Tak, za pośrednictwem text-overflowwłaściwości w CSS 3. Zastrzeżenie: nie jest jeszcze powszechnie obsługiwane w przeglądarkach.

— ceejayoz
źródło

3

Obsługa przeglądarek jest teraz naprawdę dobra, od lutego 2012. Zobacz caniuse.com/#search=text-overflow

— Simon East

1

Ach, jesteś powodem, dla którego to pytanie pojawiło się trzy lata później.

— Pan Lister,

8

W bootstrap 4 możesz dodać .text-truncateklasę, która obcina tekst za pomocą wielokropka.

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

Rozwiń fragment kodu

— Penny Liu
źródło

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
źródło

3

Większość rozwiązań wykorzystuje tutaj szerokość statyczną. Ale czasami może być źle z pewnych powodów.

Przykład: miałem tabelę z wieloma kolumnami. Większość z nich jest wąska (szerokość statyczna). Ale główna kolumna powinna być jak najszersza (zależy od wielkości ekranu).

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
źródło

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
źródło

-1

ukryj tekst przy ładowaniu i pokaż po najechaniu myszą

<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
źródło