Hi dharmendr,

Thanks for your time and help. Look good, but there is something is not right.  

Less than 25 characters font size 12px and More than 100 characters font-size 15px

When is greater than 100 it reads shortstring but doesn’t read class name longstring?

This what I have when data displays: 212 characters

Temperature: 68.4° F , Pressure: Pressure Sensor Error (Transducer Error or Cable Break).  , Current A: 0 Amps , Current B: 0 Amps , Current C: 0 Amps , Mode: Inactive, Sound Level: Abnormal DB 81.34, Voltage: 0   

7 characters

68.4° F

5 characters

77° F

22 characters

Relay 1: Off, Relay 2: Off

See the code:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<script type="text/javascript">
    window.onload = function () {
        LessMore();
    }
        function LessMore() {
        var text = document.getElementById("dvDetails").innerHTML;
        if (text.length < 30) {
            document.getElementById("dvDetails").className = 'longstring';
           /* document.getElementById("dvDetails").className = 'shortstring';*/
        }
        if (text.length > 250) {
            document.getElementById("dvDetails").className = 'shortstring';
            /*document.getElementById("dvDetails").className = 'longstring';*/
        }
    }
</script>

<style type="text/css">
    .longstring {
        font-size: 12px;
        font-family: Calibri;
        color:orangered;
    }

    .shortstring {
        font-size: 18px;
        font-family: Arial;
        color: #b200ff;
    }   
</style>

 <div class="col-6 my-4 text-wrap longstring, shortstring" id="dvDetails" data-guid="<%= DataMsg %>"><%:item.DisplayData %> </div>