Add hyphen to justify text at the end of line in CSS

nedash
 
on May 07, 2021 03:01 AM
1973 Views

Hi

I want when each line finish and there was any word that break in new line it would put - at the end of the line like below:

the student will learn the funda-

mentals of art including drawing

skills color theory and design usi-

ng various forms.

I use below codes

<span class="LblMusic">To format paragraphs I use text-align:justify, but I have one problem that there are big spaces between words.</span>
<style type="text/css">
    .LblMusic {
        float: left;
        margin: 13px 0 0 33.5px;
        width: 400px;
        height: 310px;
        text-align: justify;
        font-size: 24px;
        line-height: 38px;
        word-break: break-all;
    }
</style>

Best Regards

Neda

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 07, 2021 06:23 AM

Hi nedash,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <title></title>
</head>
<body>
    <span class="LblMusic">If you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
    <style type="text/css">
        .LblMusic {
            float: left;
            margin: 13px 0 0 33.5px;
            width: 370px;
            height: 310px;
            font-size: 24px;
            line-height: 38px;
            text-align: left;
            text-justify: distribute;
            /*word-break: break-all;*/
            word-spacing: -2px;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
            text-justify: inter-word;
        }
    </style>
</body>
</html>

Demo