为什么这个无序列表项被推送到新行？

Question

我正在尝试使用自定义列表项目项目符号。一切似乎都很好，除非有文字溢出的情况。在这些情况下，文本会被推送到自定义项目符号下方。即使溢出，我如何将所有内容保持在同一条线上？我确实希望用break-word显示溢出，我只是不想让它移动。

小提琴：http://jsfiddle.net/BZbJE/1/

CSS：

.sidebar {
    overflow: hidden;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    max-width: 100px;
    border: 1px solid gray;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
a {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
li:before {
    content:"• ";
    color:red;
}
li {
    padding-left: 1em;
    text-indent: -.7em;
    margin-top: 10px;
    font-size: 12px;
    white-space: pre-wrap;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
}

Answer 1

将white-space: pre添加到a元素。

jsFiddle example

a {
    white-space: pre;
}

或者，您也可以将相同的内容添加到伪元素中。

jsFiddle example

li:before {
    content:"• ";
    color:red;
    white-space: pre;
}