text-overflow does not work. How is this problem solved?

  .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 answer 1

    Using these two properties, you can "fix" the text-overflow.

    • white-space: nowrap - forbid to do the transfer to another line.
    • overflow: hidden - directly hide the text that goes beyond the container in order for the text-overflow property to take effect.

     .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>

    • one
      Thank you very much, friend :) - dirkgntly