CSS’s word-wrap property can be used to break a really long word so that it continues on the next line rather than having the word extend beyond its potential boundaries so that it all stays on one line.
Let’s say you had a really long word that was taking up way too much space, like in the image below:
If you wanted the word to stay within its boundaries (the container that the paragraph is in is only supposed to be 250px wide), you can use the word-wrap property to tell the code that it’s okay to break up the word to keep it contained to the confines of its parent div. Here’s what your CSS would need to look like:
Now your text should look like this:
You’ll see that the word is now cut off almost in the middle. This isn’t the default in CSS because it doesn’t always look great, but there are definitely times when you’ll need to use word-wrap property to make sure the text doesn’t overflow and maintain the integrity of your divs.
The text-overflow property is a useful one that is used to indicate how to handle text overflow. Text overflow occurs when the text or content of an element is too big for the space of the container, meaning that it overflows from its boundaries. It’s a really great way to handle the sometimes sloppy look […]
Have you ever wondered if there’s a way to control where and how the words break in your HTML? Like if for some inexplicable reason, the text doesn’t break exactly where you want it to due to the the width restrictions of the parent element? If this is the case, you should try using CSS’s […]
Textarea fields are great because they’re useful and they’re super easy to work with. Sometimes, however, a scrollbar appears within the textarea field, usually because the amount of text in the textarea exceeds the height of the textarea field because the field is just too small — there’s not much that can be done (or should […]
Setting the width of an element to the full window height is done pretty commonly, but it’s a lot more rare for an element to be given the full height of a window. The strategy behind stretching an element to the full height of the window is essentially the same as stretching an element to the […]
This tutorial shows you an easy way to add a highlight effect to an input field that has been checked by the user. Not only is this a cool and different way to add some style to your sites, but it also improves user experience by making it pretty impossible for the user to accidentally […]