Justified text with separator

by tonytlwu

HTML

<div>Sherlock Holmes • John Shamus Watson • Apple • Caramel Candy • Heat-resistant Bottle • United States • Avenger Assembles • Christopher Nolan • iPhone Bumper Case</div>

<div>
    <ul>
        <li>Sherlock Holmes</li>
        <li>John Shamus Watson</li>
        <li>Apple</li>
        <li>Caramel Candy</li>
        <li>Heat-resistant Bottle</li>
        <li>United States</li>
        <li>Avenger Assembles</li>
        <li>Christopher Nolan</li>
        <li>iPhone Bumper Case</li>
    </ul>
</div>

CSS

body {
    margin: 10px;
}
div {
    width: 260px;
    border: 1px solid red;
    text-align: justify;
    margin: 10px 0;
}