![]() With line-clamp, you can contain a block of text into certain number of lines, so the text never goes out of those lines. While, in CSS, you can truncate the text to one line using text-overflow: ellipsis īut how do you truncate a multiple lines of text to make it look like this? Say you have few boxes in grid with some text inside of them and say, the amount of text is variable so the height of the blocks is uneven. I was exploring some solutions for controlling multi-line text wraps when I came across this interesting way twitter handles it. One of the challenges doing in this is, handling text. Love your write up.If you've used hashnode on a phone, you would know that hashnode has a very flexible UI that adapts to any screen sizes while still looking controlled and beautiful. Much more powerful than the simple entity. : Mix it with media queries and you have a great solution for responsive anti-typographic-orphans! □ Orphans & Long Lines I love this property.I know people who have/had a git alias for blame and called it praise. It has nothing to do with blaming a person for a mistake, but is rather a 'show me who is responsible'. cut off, hidden), display an ellipsis (‘’, Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings). Nevertheless if I do not understand something git blame is one of the handiest tools there is. The text-overflow property in CSS deals with situations where text is clipped when it overflows the element’s box. Multibyte characters like zalgo get worse. Interestingly also if you look at my tweet above in FF vs Chrome u can already see the difference in wrapping when it encounters Lao. ![]() Same for other text manipulation CSS like uppercase/word-wrap/text-overflow. If you take any sentence in Lao like ມື້ນີ້ເປັນມື້ທີ່ດີ FF & Chrome break differently. Yup it's a pretty common problem in different standards interop (CSS - W3C, JS - ECMA262, Unicode - Unicode). The important thing is, we need to learn from our mistakes, fix it swiftly, and continue moving forward □ # Community : text-overflow: ellipsis can also help in the right : white-space property has quirks around certain scripts that don’t use whitespaces so it’s not 100% i18n-safe. We need to be empathetic that we all went in with the best intention. When that happens, don't spin your wheels playing the blame game or be quick to negative judgement. During our attempt to improve things, we're going to make mistakes. In fact, it's how we progress and become better. Most of the time, we're doing bug fixes □ Quite frankly, it's why developers still have a job. We do our best but we might miss a few spots. It's very difficult to 100% understand the full extent of our implementation. But often, we won't really know until we push up the code and let our users start using it. As developers, we always try to plan for the edge cases. But before you go all git blame □, let's assume positive intent. When you're working on existing codebase, we often run into code that doesn't makes sense. That means someone actually wrote this style into our codebase □ Before you get □. That means this overlap would never had happen if we didn't implement white-space: nowrap. So I noted that white-space: normal is the default. In the mean time, if you want a head start, check out MDN docs: white-space □ # Assume Positive Intent When Working on Existing Code Base This is used to handle situations where text overflows from its container. ![]() I plan to cover each of these in great details in a future code tidbit. 8.1K views 2 years ago All Videos In this video, we are going to take a look at the 'text-overflow' property in CSS. White-space : normal /* default */ white-space : nowrap white-space : pre white-space : pre-wrap white-space : pre-line white-space : break-spaces
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |