Coding Schools


 
Python | C Sharp | Azure AI | HTML | JavaScript | CSS | SQL Server
How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS word attributes



CSS provides several properties to control the appearance and behavior of words within text. Here are some common CSS word-related attributes:

1. word-spacing

This property specifies the spacing between words:

css
.element {
    word-spacing: 5px; /* Adds 5 pixels of space between words */
}

2. word-wrap (or overflow-wrap)

This property allows long words to be broken and wrapped onto the next line:

css
.element {
    word-wrap: break-word; /* Breaks long words and wraps them to the next line */
}

word-wrap is an older property, and its usage has been superseded by overflow-wrap.

3. overflow-wrap

This property specifies that the browser can break long words and wrap them to the next line:

css
.element {
    overflow-wrap: break-word; /* Breaks long words and wraps them to the next line */
}

4. hyphens

This property controls the usage of hyphenation for text:

css
.element {
    hyphens: none;     /* No hyphenation (default) */
    hyphens: manual;   /* Hyphenation occurs only where manually inserted */
    hyphens: auto;     /* Hyphenation occurs automatically when needed */
}

Example

Here is an example that uses multiple word-related properties:

css
.element {
    word-spacing: 5px;               /* Adds space between words */
    word-wrap: break-word;           /* Breaks long words */
    overflow-wrap: break-word;       /* Breaks long words */
    hyphens: auto;                   /* Automatic hyphenation */
}

Using these properties, you can have fine control over the appearance and behavior of words within your text, enhancing readability and visual appeal. Let me know if you need more details or specific examples!




All rights reserved | Privacy Policy | Sitemap