CSS 11 💻 line break and word break properties

line-break specifies how line break.
values: auto → uses the default break rule
normal → break using the most common rule
loose → uses the least restrictive rule
strict → uses the most stringent rule
anywhere → no need for further explanation
example 1 → this is the default value, and it allows line breaks between words or within a word
example 2 → This allows line breaks between words or within a word
example 3 → This allows line breaks at any point in the text block

word-break  controls the behavior of line breaks
values: normal → default, words break only at whitespace characters
break-all → words break in any point of the text block
keep-all → words break only at whitespace characters
break-word (deprecated)
example 1 → this is the default value and it allows words to break at whitespace characters
example 2 → This allows words to break at any point, even in the middle of a word (like "--" and "-")
example 3 → this allows words to break only at whitespace characters, not in the middle of a word

11 – line-break and word-break properties

<p class="line-break-auto">This is a very long sentence without any specified line breaks. By default, the browser will break the word at spaces or punctuation marks to fit within the container width.</p class="line-break-auto">
<p class="line-break-normal">This is a very long sentence with irregular words and symbols like "--" and "-". By setting the `line-break: normal;` property, we can allow line breaks between words or within a word. However, it may not work as expected in all browsers.</p class="line-break-normal">
<p class="line-break-anywhere">This is a very long sentence without any spaces or punctuation marks and no line breaks are allowed. Setting `line-break: anywhere;` will allow line breaks at any point in the text block, but it may not work as expected in some browsers.</p class="line-break-anywhere">

<p class="word-break-normal">This is a very long sentence without any specified word breaks. By default, the browser will break the word at whitespace characters to fit within the container width.</p class="word-break-normal">
<p class="word-break-break-all">This is a very long sentence with irregular words and symbols like "--" and "-". By setting the `word-break: break-all;` property, we can force words to break at any point in the text block.</p class="word-break-break-all">
<p class="word-break-keep-all">This is a very long sentence without any spaces or punctuation marks and no word breaks are allowed. Setting `word-break: keep-all;` will prevent words from breaking in the middle of a word.</p class="word-break-keep-all">

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.line-break-auto {
    line-break: auto; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.line-break-normal {
    line-break: normal; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.line-break-anywhere {
    line-break: anywhere; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.word-break-normal {
    word-break: normal; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.word-break-break-all {
    word-break: break-all; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.word-break-keep-all {
    word-break: keep-all; 
    border: 1px solid #ddd;
    margin-bottom: 20px;
}