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

4

С помощью двух данных свойств можно "починить" 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 that you have read and understand our privacy policy and code of conduct.

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