使用css在<li>中包装文本

Question

我有一个含有一堆李的ul。在每个li中都有一个图像和标题。 li或图像没有设定宽度。我想将文本包装起来，使其仅与上面的图像一样宽。这就像这个小提琴

<ul><li></li></ul>

http://jsfiddle.net/g4hvaLjc/

我希望图像下的文字换行到图像的宽度。

有人可以帮忙吗？！

Answer 1

你可以给你的li一个固定的宽度，并使用省略号作为文本

.figures span {
    font-size: 12px;
    font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
    letter-spacing: 0.1em;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

检查fiddle