Не работает text-overflow

#css

Не работает 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;
    }
    

        Заголовок
        

            Задает все свойства фона элемента страницы в один прием. Заменяет собой
атрибуты background-attachment, background-color, background-image, background-position
и background-repeat.
        
    



    

Ответы

Ответ 1

С помощью двух данных свойств можно "починить" 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;
}

  Заголовок
  

    Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты
background-attachment, background-color, background-image, background-position и background-repeat.