InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS word-wrap/overflow-wrap – specify if a word can break anywhere

on Mar 19, 2016

CSS property word-wrap (or overflow-wrap) specifies whether the Browser may break within a word to prevent overflow when an unbreakable string is too long to fit within the line box. It only has an effect when ‘white-space’ allows wrapping.

Note that word-wrap is legacy name for overflow-wrap. But Firefox supports word-wrap better. So we’ll use word-wrap for the purpose of this tutorial.

CSS property word-wrap

CSS version: CSS 3
Value: normal | break-word
Initial: normal
Inherited: yes
Animatable: no

word-wrap values

normalLines may break only at allowed break points. A word longer that line box will not break other than allowed break points.
word-breakWord may break at any point. If there are break points, then first attempt is to break at those points.

Example – normal and break-word word-wrap

In this example word is longer than line box.

  1. For word-wrap=normal case, it will only break and wrap at natural break points (like dash).
  2. For word-wrap=break-word case, it will break and wrap even if there is no natural break point (like dash). Note that first attempt is still made to break at natural break point.
In the following code, CSS property word-wrap can be changed to the following values
  • normal
  • break-word
<style> 
.box {
  width: 100px; 
  background-color: lightgreen;
  word-wrap: normal;
}
</style>
<div class="box">
veryvery-veryveryverylongword
</div>
word-wrap refresh done
try it online

Related

  • CSS word-break - specify line breaking rules between letters

Specification

  • W3C CSS 3 word-wrap specification

Suggested posts:

  1. CSS word-break – specify line breaking rules between letters
  2. CSS text-overflow – truncate text with three dots
  3. CSS overflow – visible, hidden and scroll for overflowing content
  4. CSS word-spacing – additional space between words
  5. CSS flex-wrap
  6. CSS font shorthand property
  7. CSS white-space – collaping and wrapping of whitespaces and newlines
  8. PHP regex – word boundary examples
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress