![]() ![]() Boo! If you really need that feature, consider using JS for this until browser support comes around, like so: const ps = document. longlho : white-space property has quirks around certain scripts that dont. webkit-line-clamp: 2 - here we can specify. The longest word in any of the major English language dictionaries is. KyleDaltonSmith : text-overflow: ellipsis can also help in the right situation. text-overflow: ellipsis - optional, it will add three dots at the end of the trimmed line. Turns out others had the same idea, but the discussion from 2014 didn't go anywhere. Use text-ellipsis to truncate overflowing text with an ellipsis ( ) if needed. Since I put the checkbox right before the paragraph, I could now use the :checked pseudo class to toggle truncation, like so: input:checked + p I want to speak my mind and don't appreciate being put into a box. I couldn't use a or tag, as this is a job for the infamous checkbox hack, and that required a label element and an accompanying.checkbox! So I ended up with the following markup: Cool! What about that expand button though?Ĭreating the "show more" button requires some outside-the-box CSS hackery. ellipsis - This value displays the ellipsis (.) at the place of. Control the size and style of text using the Typography helper classes. This property has two values: clip - It is the default value that trims the overflowed text. docs-highlight stylewidth: 8rem > This text should overflow the parent. And luckily, CSS Tricks has a nice working demo, plus browser support is fairly decent now. Control text size, alignment, wrapping, overflow, transforms and more.Start aligned text on all viewport sizes. Text-overflow: ellipsis does not support multiple lines, but I remembered the line-clamp property that can be used to achieve multiline truncated text.
0 Comments
Leave a Reply. |