4

Не работает text-overflow. Каким образом решается данная проблема?

    .item {
        padding: 10px 10px;
        border-top: 1px solid #DCDCDC;
        border-bottom: 1px solid #DCDCDC;
        background: #F7F7F7;
        margin-bottom: 5px;
        position: relative;
    }

    #description {
        color: black;
        text-overflow: ellipsis;
    }
    <div class="item">
        <a href="">Заголовок</a>
        <div id="description">
            Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
        </div>
    </div>

1 ответ 1

5

С помощью двух данных свойств можно "починить" text-overflow.

  • white-space: nowrap - запрещаем делать перенос на другую строку.
  • overflow: hidden - непосредственно скрываем текст, выходящий за рамки контейнера, для того чтобы в силу вступило свойство text-overflow.

.search_page_item {
  padding: 10px 10px;
  border-top: 1px solid #DCDCDC;
  border-bottom: 1px solid #DCDCDC;
  background: #F7F7F7;
  margin-bottom: 5px;
  position: relative;
}

#description {
  color: black;
  text-overflow: ellipsis;
  
  overflow: hidden;
  white-space: nowrap;
}
<div class="search_page_item">
  <a href=""/>Заголовок</a>
  <div id="description">
    Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
  </div>
</div>

2
  • 1
    спасибо огромное, друг:)
    – dirkgntly
    12 июн 2016 в 21:23
  • И еще небольшое дополнение - должен быть inline
    – EHOT
    15 апр 2020 в 16:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.