CSS TEXT PROPERTIES | CSS BASICS

Share the post

CSS_TEXT_PROPERTIES
Hello All, Today we will see the different types of CSS text properties. In this topic we will discuss about how to display a big size text into same div which will display all the data by using the word-break property of CSS. Also we will discuss how to design the CSS text by using different properties in CSS.

How to display big size text into same div ?

Suppose, we have the big size text (for example one full paragraph of 4-5 rows), then we have to display the same text into the same div without hiding the text inside it then we can use the property word-break.
This property will help you to display full content of text inside a single div without hiding any data.

Example :


<html>
<head>
    <h1>HTML : word-break example</h1>
    <style>
    .display-data{
        word-break: break-all;
    }
    </style>
</head>
<body>
    <div class=”display-data”>
        This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.This is sample text.
    </div>
</body>
</html>
<script>
</script>

Output :

Output
In above example we can see that all text are displayed inside a single div without hiding any data.

Different Text Editing Properties In CSS :

Convert First Letter To Capitalize :

To convert first data of all the words in a line we will use the text-transform: capitalize; property in CSS. The example is shown at the bottom of the page.

Convert All Letter To Uppercase:

To convert all letters in uppercase we will use the text-transform: uppercase; property in CSS. The example is shown at the bottom of the page.

Convert All Letter To Lowercase:

To convert all letters in lowercase we will use the text-transform: lowercase; property in CSS. Example shown at the bottom of the page.
To display shadow for text & assign different properties of CSS we will see the following example.  In this example I have shown you text-transform property also.

Example :


<html>
<head>
    <h1>HTML : text-capitalize example</h1>
    <style>
        .txt-capitalize {
            text-transform: capitalize;
        }
        .txt-uppercase {
            text-transform: uppercase;
        }
        .txt-lowercase {
            text-transform: lowercase;
        }
        .txt-data {
            font-size: 50px;
            color: yellow;
            font-family: ‘Courier New’, Courier, monospace;
        }
        .txt-shadow {
            text-shadow: 10px 10px 10px black;
        }
    </style>
</head>
<body>
    <h1>Used to assing different properties to text</h1>
    <div class=”txt-data”>
        This is sample text.
    </div>
    <h1>Used to assing shadow properties to text</h1>
    <div class=”txt-shadow”>
        This is sample text.
    </div>
    <h1>This is used to capitalize the first letter of the word.</h1>
    <div class=”txt-capitalize”>
        This is sample text.
    </div>
    <h1>This is used to convert all text to uppercase</h1>
    <div class=”txt-uppercase”>
        This is sample text.
    </div>
    <h1>This is used to convert all text to lowercase</h1>
    <div class=”txt-lowercase”>
        This is sample text.
    </div>
</body>
</html>
<script>
</script>

Output  :

T TheIonicHelper Topics 252520List 47.Blog .JavaScript 252520loops 252520Part 1 index.html 2528Moto 2BG4 2529 2B 25286 2529 2

In above example, you can see the different properties assign to the text data which shown under the class name .txt-data. For showing the shadow for the text we have used the .txt-shadow class.

Leave a Comment