обрізати текст задовго всередині div

85

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

very long text
</div>

будь-яким способом використовувати чистий css, щоб вирізати занадто довгий текст, а не показувати в наступному новому рядку і показувати максимум 100 пікселів

html css

— комета
джерело

56

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

Це один із можливих підходів, який я можу придумати

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

Таким чином довгий текст все одно буде обертатися, але не буде видимим через overflowвстановлений, і встановивши те line-heightсаме, що heightми переконуємось, що коли-небудь відображатиметься лише один рядок.

Див. Демонстрацію тут та приємний опис властивості переповнення з інтерактивними прикладами.

— Давор Лучич
джерело

1

Я б не розраховував на "висоту рядка", щоб запобігти загортанню, оскільки цілком можливо, користувач змінив параметри шрифту (для меншого тексту) у браузері. Так само для великих шрифтів, якщо ви встановили висоту div до кількості пікселів, це може виглядати жахливо. Особливо для мобільних браузерів та екранів "сітківки", я хотів би спробувати залишити висоту div гнучкою, якщо це дозволяє дизайн-макет - як слід!

— PJ Brunet

154

Ви можете використовувати:

overflow:hidden;

щоб приховати текст поза зоною.

Зверніть увагу, що він може вирізати останню літеру (тому частина останньої літери все одно відображатиметься). Приємнішим способом є відображення крапки в кінці. Ви можете зробити це, використовуючи text-overflow:

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

— Арсені Мурзенко
джерело

white-space: nowrap насправді не так необхідний, оскільки у мене є кілька рядків, що показують довгий шлях до файлу. Без пробілу довгий непорушний шлях отримає еліпсис, тоді наступний рядок покаже решту шляху. Кікер полягає в тому, що я можу скопіювати текст (у тому числі еліпсис), і тоді він вставить весь шлях. Приємно!

— Роберт Кох,

Якщо вам було цікаво (як і мені), еліпсис не працюватиме у старих версіях Firefox. "Починаючи з переливання тексту Firefox версії 7: три крапки підтримується." stackoverflow.com/questions/5990414/…

— PJ Brunet

Що робити, якщо ви хочете, щоб підказка при наведенні для відображення повного тексту або щось подібне?

— pedrorijo91

2

@ pedrorijo91 Ви можете просто використовувати title="full text goes here"в html.

— Джеррі

27

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

http://jsfiddle.net/hT3YA/

— s1ntez
джерело

9

Чому б не використовувати відносні одиниці?

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

— Томаш Мачек
джерело

4

Нижче код приховає ваш текст із фіксованою шириною, яку ви вирішите. але не зовсім підходить для адаптивних дизайнів.

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

Оновлення

Я помітив на (мобільних) пристроях, що текст (змішаний) один з одним завдяки (фіксованій ширині) ... тому я відредагував наведений вище код, щоб швидко приховати його наступним чином:

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

(Максимальна ширина) гарантує, що текст буде швидко приховуватись незалежно від (розміру екрана) і не змішуватись між собою.

— Ігри Мізо
джерело

3

Хоча цей код може відповісти на питання, надаючи додатковий контекст щодо того, чому та / або як цей код відповідає на питання, покращує його довгострокове значення.

— Дональд Дак

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>

Розгорніть фрагмент

— Супрія
джерело