Question about CSS - hide text that doesn't fit in the DIV block

First of all, do not forget that any “rubber” design should still have a minimum width, after which it either ceases to taper or changes its appearance for mobile devices. As a matter of fact, you have two options for how to solve the problem with cutting the text.

Option 1: Beckend solution

It's all quite simple. Depending on what language you use, you cut the name of the rubric so that it fits into your field. For example, the code in php:

 // обрежем текст на определённое количество $string = substr($string, 0, 200); // убедимся, что текст не заканчивается знаками препинания $string = rtrim($string, "!,.-"); // находим последний пробел, устраняем его и ставим многоточие $string = substr($string, 0, strrpos($string, ' ')); // выводим echo $string."… "; 

Option 2: Front End Solution

There may be several sub-options.

• use css
• use jss

I would suggest discarding the first sub-option, since it will eventually lead to unpredictable consequences in some cases. Anyway, leaving the text simply invisible is not a very good decision. But in general, it is done this way:

 p.clip { white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden; /* Обрезаем все, что не помещается в область */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ text-overflow: ellipsis; /* Добавляем многоточие */ } 

As you can see, it is solved quite simply, but there is no check for punctuation, do not remove the last space, and indeed different browsers support css differently.

The second sub-option is more optimal. On the one hand, it is similar to the first solution, on the backend side, on the other hand, it is more flexible, because it allows you to cut text dynamically, depending on the size of the user's screen and, accordingly, depending on the width of the block where the text should be.

The easiest option, when you do not have the required length, is:

 var sliced = text.slice(0,10); if (sliced.length < text.length) { sliced += '...'; } 

Here we cut the text, and if it is longer than the specified length, then add an ellipsis. You can add it with the same treatments as in the example about php, on your own. Well, the most difficult thing is to determine the size of the block under which to tune your text, and then calculate the required number of characters. It all depends a lot on your code, I can only say that two functions of vanilla js will definitely help you:

 // возьмем элемент, ширина которого нас интересует var test = document.getElementById("test"); // узнаем его длину var width = (test.clientWidth) + "px"; 

Further, I think everything is clear.