How To Use CSS Style WordWrap Properties With JavaScript

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

In Java Script we can break words and fix into specified length of div .so today we are going to discuss how to break continues words using java script

How To Use CSS Style WordWrap Properties With JavaScript

The wordWrap property allows long words to be able to be broken and wrap onto the next line.

Syntax and Usage

Return the wordWrap property:
object.style.wordWrap

Set the wordWrap property:
object.style.wordWrap = "normal|break-word|initial|inherit"
 

Property Values
 

Value Description
normal Break words only at allowed break points
break-word Allows unbreakable words to be broken
initial Sets this property to its default value. 
inherit Inherits this property from its parent element. 
 

Return Value:   A String, representing the word-wrap property of an element.

Example(1)

<div id="DIV">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<br>
<button class="btn btn-info" onclick="break_function()">Click it</button>
<script>
    function break_function() {
        document.getElementById("DIV").style.wordWrap = "break-word";
    }
</script>

In above example when you click button it will change the let the DIV element wrap words.

Complete code for CSS Style WordWrap Properties With JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Use CSS Style WordWrap Properties With JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }
    #DIV {
        width: 200px;
        height: 200px;
        background-color: hotpink;
        border: 1px solid black;
        font-size: 30px;
        color: white;
    }
</style>

<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1>Use CSS Style WordWrap Properties With JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <div id="DIV">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <br>
        <button class="btn btn-info" onclick="break_function()">Click it</button>
    </div>
</body>
</html>
<script>
    function break_function() {
        document.getElementById("DIV").style.wordWrap = "break-word";
    }
</script>

 

Related Post