Break texts

  

Good Morning,


I have a text wrap problem, I would like CSS command suggestions that could solve this problem, as the image, when a company has the name very large, it breaks the box and when the name is normal and small the name gets normal, I'd like some tips to solve this problem

Hello Lucas,

If you want to simply "cut" the text, put it inside a container and apply the "overflow:hidden;" CSS property to it.

If you want to create an ellipses, you can use something like this: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Cheers.

Some information that may be useful: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Eduardo Jauch wrote:

Hello Lucas,

If you want to simply "cut" the text, put it inside a container and apply the "overflow:hidden;" CSS property to it.

If you want to create an ellipses, you can use something like this: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Cheers.

Some information that may be useful: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp


Hi, thanks for the help. I was researching and found solutions in jquery, why some that I tested in CSS did not work, until I wanted to know the cause, it must be why I make a list of webblocks to display the records? but thanks for the help, I'll test the css for ellipsis and see if it works

Lucas Vitalli wrote:

Eduardo Jauch wrote:

Hello Lucas,

If you want to simply "cut" the text, put it inside a container and apply the "overflow:hidden;" CSS property to it.

If you want to create an ellipses, you can use something like this: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Cheers.

Some information that may be useful: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp


Hi, thanks for the help. I was researching and found solutions in jquery, why some that I tested in CSS did not work, until I wanted to know the cause, it must be why I make a list of webblocks to display the records? but thanks for the help, I'll test the css for ellipsis and see if it works

If you put a container around the text expression (with fill parent) and overflow:hidden; it will be cut. With the ellipses, it will add "..." to the end.

Trying to apply this in the "list" or around the web block will not work.

Cheers.