CODEWITHSUNDEEP
htmlwhitespaceline-breaksdefinitionsoft-hyphen
Romain Guillaume
Romain Guillaume

Reputation: 43

What is normal HTML line break behavior?

I am looking for a list of caracters and elements that may break HTML lines such as whitespaces but I can't find any page on the Internet with a definition of what is the normal HTML line break behavior. I have found those :

I am not expecting it to break in the "pre" tag, of course!

Upvotes: 3

Views: 999

Answers (1)

Oriol
Oriol

Reputation: 287980

If I understand correctly, you want to know what characters create a soft wrap opportunity, that is, they allow a line break in order to fit the content within the measure.

The answer is that it's not fully defined, and depends on the language:

In most writing systems, in the absence of hyphenation a soft wrap opportunity occurs only at word boundaries. Many such systems use spaces or punctuation to explicitly separate words, and soft wrap opportunities can be identified by these characters. Scripts such as Thai, Lao, and Khmer, however, do not use spaces or punctuation to separate words. Although the zero width space (U+200B) can be used as an explicit word delimiter in these scripts, this practice is not common.

[...] CSS does not fully define where soft wrap opportunities occur, however some controls are provided to distinguish common variations.

You can partially control this behavior using some CSS properties like

  • line-break, to specify how wrapping interacts with punctuation and symbols
  • word-break, which may allow soft wrap opportunities between letters
  • hyphens, to control whether hyphenation is allowed to create more soft wrap opportunities
  • overflow-wrap/word-wrap, which may allow arbitrary breaks within a word to prevent overflow

If you want the full list of characters that create a soft wrap opportunity, you can use JS:

var log = console.log;
console.log = Function.prototype;
console.config({maxEntries: Infinity});
console.log = log;

var test = document.createElement('div');
test.className = 'test';
document.body.appendChild(test);
for (var i=0; i<0xffff; ++i) {
  var char = String.fromCharCode(i);
  test.textContent = 'a' + char + 'b';
  if (test.clientHeight > 1) {
    console.log(i.toString(16) + ': ' + JSON.stringify(char));
  }
}
document.body.removeChild(test);
.test {
  width: 0;
  line-height: 1px;
}
div.as-console-wrapper {
  max-height: 100%;
}

Upvotes: 5

Related Questions