From 9164fd7bffd91ec9234e5eeeb5b3f2029651e36b Mon Sep 17 00:00:00 2001 From: shreyash2509 Date: Wed, 26 Apr 2023 20:43:24 +0530 Subject: [PATCH] add a tip named: Word-wrap for title Wraping --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 2fc4083..0096467 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,8 @@ A collection of tips to help take your CSS skills pro. 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) +1. [Use `word-wrap` to Wrap a Title into a Respective Multiline heading](#use-word-wrap-to-wrap-a-title-into-a-respective-multiline-heading) + ### Use a CSS Reset @@ -637,6 +639,16 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei **Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `

`. +### Use `word-wrap` to Wrap a Title into a Respective Multiline heading + +`word-wrap: break-word;` makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap as well because as the spec says, they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap. Blink (tested Chrome v45) will take either one. + +```css +.dont_brk { + word-wrap: break-word; +} +``` + [back to table of contents](#table-of-contents)