<style>
.text-box {
border: solid;
padding: 4px;
width: 110px;
font-size: 18px;
text-align: justify;
}
.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">
antidisestab­lishment­arianism
</div>
</div>
<div class="test">
<p>The default (<tt>hyphenate-character: auto</tt>)</p>
<div class="text-box hyphenate-character-auto">
antidisestab­lishment­arianism
</div>
</div>
<div class="test">
<p>Bullet (<tt>hyphenate-character: "\2022"</tt>)</p>
<div class="text-box hyphenate-character-bullet">
antidisestab­lishment­arianism
</div>
</div>
<div class="test">
<p>Middle dot and tilde (<tt>hyphenate-character: "\B7~"</tt>)</p>
<div class="text-box hyphenate-character-tilde-dot">
antidisestab­lishment­arianism
</div>
</div>