Блог

Главная - Вопросы по программированию - как добавить пробел после переполнения текста точками с многоточием (…) и текстом

как добавить пробел после переполнения текста точками с многоточием (…) и текстом

#html #css

#HTML #css

Вопрос:

привет, я использую функцию усечения, чтобы отрезать свой текст.

я могу получить ожидаемый результат, но нуждается в некотором стилизации, не уверен, как это сделать.

текущий вывод :

…texttext

ожидаемый результат:

… texttext

мне нужно добавить пробел после этих 3 точек перед текстом. кто-нибудь может помочь с этим

я использую следующий код, 

    .title{
     font-size: 8pt;
     direction: rtl;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: bold;
     text-indent:2px;
    }

Ответ №1:

Не уверен, что этого можно достичь с помощью чистого CSS. Однако вы могли бы применить некоторую логику javascript для проверки и размещения класса следующим образом:

 var p = document.querySelector(".title");

if (p.scrollWidth > p.offsetWidth) p.classList.add("ellipsis");

while (p.scrollWidth > p.offsetWidth) {
  p.innerHTML = p.innerHTML.slice(0, -1);
}  
 p {
  width: 50px;
  border: 1px solid;
  padding: 2px 5px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis:after {
  content: " ... "
}  
 <body>
  <p class="title">
    Testing overflow: look at me ! Testing overflow: look at me !Testing overflow: look at me !
  </p>
</body>