<style>
    html {
        -webkit-locale: "en_US";
    }

    .text-box {
        border: solid;
        padding: 4px;
        width: 330px;
        font-size: 18px;
        text-align: justify;
        -webkit-hyphens: auto;
    }

    .float {
        width: 75px;
        height: 5em;
        background-color: aliceblue;
        float: right;
        margin-left: 10px;
    }

    .hyphenate-character-auto {
        -webkit-hyphenate-character: auto;
    }

    .hyphenate-character-bullet {
        -webkit-hyphenate-character: "\2022";
    }

    .hyphenate-character-tilde-dot {
        -webkit-hyphenate-character: "\B7~";
    }

    .test {
        float: left;
        margin: 0 4px;
    }
</style>
<div class="test">
    <p>The initial value (should be like <tt>auto</tt>)</p>
    <div class="text-box">
        <div class="float"></div>
        The chief difficulty Alice found at first was in managing her
        flamingo: she succeeded in getting its body tucked away,
        comfortably enough, under her arm, with its legs hanging down,
        but generally, just as she had got its neck nicely straightened.</div>
</div>
<div class="test">
    <p>The default (<tt>hyphenate-character: auto</tt>)</p>
    <div class="text-box hyphenate-character-auto">
        <div class="float"></div>
        The chief difficulty Alice found at first was in managing her
        flamingo: she succeeded in getting its body tucked away,
        comfortably enough, under her arm, with its legs hanging down,
        but generally, just as she had got its neck nicely straightened.
    </div>
</div>
<div class="test">
    <p>Bullet (<tt>hyphenate-character: "\2022"</tt>)</p>
    <div class="text-box hyphenate-character-bullet">
        <div class="float"></div>
        The chief difficulty Alice found at first was in managing her
        flamingo: she succeeded in getting its body tucked away,
        comfortably enough, under her arm, with its legs hanging down,
        but generally, just as she had got its neck nicely straightened.    </div>
</div>
<div class="test">
    <p>Middle dot and tilde (<tt>hyphenate-character: "\B7~"</tt>)</p>
    <div class="text-box hyphenate-character-tilde-dot">
        <div class="float"></div>
        The chief difficulty Alice found at first was in managing her
        flamingo: she succeeded in getting its body tucked away,
        comfortably enough, under her arm, with its legs hanging down,
        but generally, just as she had got its neck nicely straightened.    </div>
</div>