There are several other properties, which are necessary for this solution. This setting is normal by default which allows words to exceed the current line-width (unless line-overflow is set).
overflowWrap ( indicator ) Sets whether textbox should line-break within a word to prevent text from overflowing. We will need to count the number of lines we desire and then multiply it with line-height to get the maximum height. The keyword ellipsis will set the overflow mark to, otherwise the provided string is used as-is. The process is straightforward all you need is to set the height on the box or element, but here is the tricky part. Let’s be quick and dive into the second solution, which is on multi-line. Solution # 2: Truncate text for multiple lines. I will use the following properties altogether: We need to hide the text which is over-flowing and then add the ellipsis (three dots at the end). 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)
