przyciąć tekst za długi w elemencie div

85

<div style="display:inline-block;width:100px;">

very long text
</div>

jakikolwiek sposób, aby użyć czystego CSS do wycięcia tekstu, który jest zbyt długi, zamiast wyświetlać go w następnej nowej linii i wyświetlać tylko maksymalnie 100 pikseli

html css

— cometta
źródło

56

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

To jedyne możliwe podejście, które przychodzi mi do głowy

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

W ten sposób długi tekst będzie nadal zawijany, ale nie będzie widoczny z powodu overflowustawiania, a ustawiając line-heighttak samo, jak heightupewniamy się, że tylko jedna linia będzie kiedykolwiek wyświetlana.

Zobacz demo tutaj i ładny opis właściwości przepełnienia z interaktywnymi przykładami.

— Davor Lucic
źródło

1

Nie liczyłbym na „wysokość wiersza”, aby zapobiec zawijaniu, ponieważ jest możliwe, że użytkownik zmienił ustawienia czcionki (dla mniejszego tekstu) w przeglądarce. Podobnie w przypadku dużych czcionek, jeśli wysokość elementu div została ustalona na liczbę pikseli, może to wyglądać okropnie. Szczególnie w przypadku przeglądarek mobilnych i ekranów „siatkówki”, starałbym się pozostawić wysokość elementu div elastyczną, jeśli pozwala na to układ projektu - a powinno!

— PJ Brunet

154

Możesz użyć:

overflow:hidden;

aby ukryć tekst poza strefą.

Zwróć uwagę, że może wyciąć ostatnią literę (więc część ostatniej litery będzie nadal wyświetlana). Lepszym sposobem jest wyświetlenie na końcu wielokropka. Możesz to zrobić za pomocą text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

— Arseni Mourzenko
źródło

white-space: nowrap nie jest tak naprawdę konieczne, ponieważ mam wiele linii pokazujących długą ścieżkę do pliku. Bez spacji długa nierozerwalna ścieżka otrzyma wielokropek, a następna linia pokaże resztę ścieżki. Kicker polega na tym, że mogę skopiować tekst (w tym wielokropek), a następnie wklei całą ścieżkę. Ładny!

— Robert Koch

Na wypadek, gdybyś się zastanawiał (tak jak ja), wielokropek nie będzie działać w starszych wersjach Firefoksa. „Od wersji 7 Firefoksa przepełnienie tekstu: obsługiwane jest wielokropki”. stackoverflow.com/questions/5990414/…

— PJ Brunet

co jeśli chcesz mieć podpowiedź po najechaniu kursorem, aby wyświetlić pełny tekst lub coś podobnego?

— pedrorijo91

2

@ pedrorijo91 Możesz po prostu użyć title="full text goes here"w html.

— Jerry,

27

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

— s1ntez
źródło

9

Dlaczego nie użyć jednostek względnych?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

— Tomas Macek
źródło

4

Poniższy kod ukryje Twój tekst o ustalonej przez Ciebie szerokości. ale niezupełnie odpowiednie dla responsywnych projektów.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Aktualizacja

Zauważyłem na (mobilnych) urządzeniach, że tekst (zmieszany) ze sobą ze względu na (stała szerokość) ... więc zmodyfikowałem powyższy kod, aby był ukryty w następujący sposób:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(Max-width) zapewnia, że tekst będzie responsywnie ukryty niezależnie od (rozmiaru ekranu) i nie będzie mieszany ze sobą.

— Gry Mizo
źródło

3

Chociaż ten kod może odpowiedzieć na pytanie, zapewnia dodatkowy kontekst dotyczący tego, dlaczego i / lub jak ten kod odpowiada, poprawia jego długoterminową wartość.

— Kaczor Donald

0

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

Rozwiń fragment

— Supriya
źródło