CSS’s Word-Wrap Property

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:

Screen Shot 2017-01-23 at 11.22.58 AM

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:

p{
word-wrap: break-word;
}

Now your text should look like this:

Screen Shot 2017-01-23 at 11.23.49 AM

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.

CSS3’s Tilted Text Effect

Screen Shot 2017-01-11 at 1.33.14 PM

Here’s a cool text effect that can be achieved easily using CSS3: tilted text. To create this effect, you’ll need to create to divs — one for the text that is to be tilted to the left, and another for the text that is to be tilted to the right. Your HTML should look something […]

Read on...

How to Use the @font-face Rule

Sick of using web-safe fonts, or scouring Google fonts (https://fonts.google.com/) for something new and innovative? With the @font-face rule, it’s totally possible to use ANY font in your web apps, as long as you have access to the .ttf/.otf or .woff file on a server somewhere (preferably on the server that’s local to your project). […]

Read on...

5 Cool CSS Tutorials for Your Next Project

Screen Shot 2017-01-08 at 6.06.08 AM

Looking for some inspiration of something cool or unique to add to your next project? Check out any of these tutorials below: 1. Blur Menu with CSS Transitions This tutorial comes complete with several different options for creating a navigation menu with cool blurred text effects and smooth CSS transitions. 2. Animated Content Tabs Learn […]

Read on...

The Newbie’s Guide to Code Snippets

If you’re new to CSS (or even if you aren’t!), you can learn a lot from checking out different CSS code snippets. Not only can you use them to learn some new CSS techniques or skills (studying snippets is a great way to see how properties can be used in different ways to achieve all […]

Read on...

Using CSS3’s text-overflow Property

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 […]

Read on...

CSS3’s Word-Break Property

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 […]

Read on...

How to Get Rid of Scroll in Textarea Fields

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 […]

Read on...

How to Give an Element the Height of the Window

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 […]

Read on...

How to Add a Highlight Effect to Checked Input Field

Screen Shot 2016-12-17 at 11.18.34 AM

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 […]

Read on...