Here is the next thing we need to tackle. Now, our text should be on the same line and should overflow from the box if it’s long enough and wrapped before. This solution works for single-line truncation. We can achieve it by setting a white-space property to the value nowrap. Sometimes, we want our text to be on a straight line. Solution # 1: Truncate text for single line Note, this property will not work unless your box where you are putting text doesn’t have white-space and overflow: hidden properties. The value which worked for me when I wanted to display three dots at the end of my truncated text was ellipsis. What do you want to do with the hidden text? There are several different values which you can use like: So, every single text which will hit the limit of 400px will wrap and shift to the next line automatically.
The text will wrap it up, according to the available white space.īy default, the white-space of the box is set to normal. If the width of the box is 40px, and you added text into it. In simple words, when you put the text in any element, the text adjustment in that specific space depends upon the width of it. I have made them easy for you, so you can quickly grab concepts.Ĭonsider this property as the box text handler.
Quick Note: If you are new here: Our YouTube channel can help you to learn modern Web Development by building Real World projects fast & easy way:īefore diving into the exact solution, I want you to understand the properties below. There were some situations where I was not allowed to use the JS function. But, recently, I faced a challenge on front-end in CSS, where I needed to truncate text for multiple lines. There are a lot of methods in every language to truncate text.
0 kommentar(er)
