Question

This is my coding.
The result of using css as class Hyphenate, the result is shows in result1.
However, what I want is the result shows in result2.
Also, in result1, when there are just few words, it gives wide gap between words, it’s really ugly.
Is anyone now how to solve this problem?

–edit question–

What I am asking here is: I have a textarea for the input and div tag for the result.
What is the way so that whenever there’s a word that reaches the right bound, the word is break into a new line, but, the goal is just like what is shows by result 2.
Hopefully anyone can understand now. Thanks.

Div tag has width=170px which

.hyphenate{ 
    text-wrap: suppress; 
    word-break: break-all; 
    word-wrap: break-word; 
    white-space: -moz-pre-wrap; 
    white-space: pre-wrap; 
    white-space: -o-pre-wrap; 
    white-space: pre-line; 
    width:170px; 
    text-align:justify; 
}

–

<script type="text/javascript">
    function copyIt() {
        var x = document.getElementById("textarea").value;
        document.getElementById("result1").innerHTML = x;
    }
</script>

–

<table border=2 width="160"> 
    <tr>
        <td colspan=2>
            <h1>Hyphenator Tester</h1> 
        </td>
    </tr> 
    <tr> 
        <td width="160" valign="top"> 
            <textarea id="textarea" rows=5 cols=20 onkeyup="copyIt()">
                This is the preview of something What
            </textarea> 
            <br><br>Result:<br>
            <div id="result1" class="hyphenate"> 
                This is the preview of something what I've wrote earlier
            </div>
            <br>Result wanted:<br>
            <div id="result2" class="hyphenate">
                This is the preview of some- thing what I've wrote earlier
            </div> 
        </td>
    </tr> 
</table>

Answer 1

Try Hyphenator.js.