Dienstag, 9. Januar 2018

Word-Wrap & Word-Break nowrap

You want a sentence not to be wrapped and a scrollbar displayed? This is solvable with two simple CSS rules.

You know the CSS propertys word-break and word-wrap, but they have no value "none" or "nowrap".

For a sentence not wrapped, such as a command line command, the CSS property white-space is responsible.

Together with the CSS property overflow-x, the box remains in the frame with a scrollbar.
white-space: nowrap;
overflow-x: auto;
With overflow-x: auto; a scrollbar will display only when the blockquote content overlap the quote box.

Example (bash: check the SSL cert on google.de):
Domain=google.de; openssl s_client -showcerts -servername $Domain -connect $Domain:443 2>/dev/null | openssl x509 -inform pem -noout -serial -dates; cert-info --host $Domain --cn; cert-info --host $Domain --alt
The CSS rule can be set globally, or with a style attribute only locally.
<blockquote style="white-space: nowrap;overflow-x: auto;">
No guarantee. No warranty. No support.
Use at your own risk.