It’s difficult to know and see how the different options behave if you don’t write them directly. Overflow and wrapping is another example of how it’s best to make decisions for interfaces in a browser. Breaking words without hyphens is probably irritating too, but less so because it looks like a necessity and a side effect of the technology. In the wrong place, they look like human error and becomes irritating. Because hyphens work best when they look intentional. Beyond that, it seems largely a waste of time. But instead of targeting words at the end of lines, it’s about adding soft hyphens to long words in case they end up at the end of a line. That’s also what hyphening on the web boils down to. No machine can understand words, context and rules to achieve a satisfactory result. But despite a lot of parameters and hyphen rule lists, this has not been solved there either. Something that probably should be fixed before the text is part of the HTML.įor automatic hyphens, it can be tempting trying to replicate the level of control found in fixed format publishing – like print and ads. But that is more of a data quality issue.
Setting characters as break characters would have been nice, for instance when there are underscores instead of spaces. But considering the fundamental differences between fixed formats and the web, I don’t think there is a need for a lot of improvement. Text wrapping on the web might seem far from optimal. Especially in tables where they add characters that are not part of the data. They can be a source of bugs and human error. That can be solved by manually and automatically adding hyphens, but I think they should be used mainly with intentional breaks.Ī weird-looking break is often a better option for the user than an automatic hyphen. Hyphens #īy default, there is no indication of a word breaking beyond the wrap itself. It could also be useful on spans containing numbers, as an alternative to the non-breaking space. I use this mostly in table cells with numbers. White-space: nowrap prevents all forms of wrapping, even at spaces and hyphens. Word-break: keep-all is only different from the normal setting in that it prevents CJK text from breaking. I’m sure there are cases where this setting is useful.
#WORD WRAP BREAK WORD VS WORD BREAK BREAK ALL FULL#
All full lines get the same length but a lot of split words makes it harder to read. Word-break: break-all breaks all words at the end of the lines. Which means it potentially doesn’t shrink as much. Overflow-wrap: break-word breaks similar to overflow-wrap: anywhere, but not at soft hyphens when calculating the smallest intrinsic size. (This works similar to word-break: break-word. I use this option when I need to break long words, URLs and data without spaces. Which means that you risk a bit of space on the previous line. The word starts on a new line and breaks where it would have overflown. Overflow-wrap: anywhere breaks only words that overflow. Break properties affect wrapping inside words only.
Overflow-wrap properties affect wrapping both outside and inside words. Chinese, Japanese and Korean (CJK) texts are exceptions and will break anywhere by default. They make the text wrap at the regular wrap characters and not inside words. Overflow-wrap: normal and word-break: normal are defaults. That works in most cases, but sometimes we need to control if and where wrapping should occur.īreak is when wrapping happens inside a word. Text wrapping happens by default at characters like spaces and hyphens, but not inside words. Wrap is when an element continues on the next line instead of overflowing. Overflow happens when an element is bigger than its container. In the example below we can make the word-break between letters instead. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.
The word-break property in CSS can be used to change when line breaks ought to occur.
0 kommentar(er)
