css - 应用文本溢出 :ellipses properly

Question

我一直在尝试将此 CSS 应用于某些部分，但尽管阅读了样式，并记得将 overflow:hidden 与 text-overflow 一起包含在内，但我无法让它工作。下面是一些没有文本溢出样式的代码。我需要在哪里申请？我以为它只是在包含文本的 div 上。

<main>
    <div class="indexr1">
        <section class="indexc1b">
            <h1>header</h1>
            <div class="bl">
                <div class="prev">Placeholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholder</div>
            </div>
            <div class="blM">
                <div class="prev">Placeholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholder Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff last</div>
            </div>
            <div class="bl">
                <div class="prev">Placeholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholderPlaceholder placeholder placeholder placeholder placeholder.</div>
            </div>
        </section>
    </div>
</main>

CSS:

@font-face {
    font-family:'Roboto';
    font-style:normal;
    font-weight:400;
    src:url(/resources/font.woff) format('woff');
}
* {
    margin:0;
    padding:0;
    font-size:small;
    font-family:Roboto;
    vertical-align:middle;
    text-decoration:none;
}
main {
    font-size:0;
    line-height:1.5;
    text-align:center;
    margin:0 auto;
    width:86%;
    min-width:1000px;
}
section {
    border:1px solid #BBB;
    background:#FFF;
    border-radius:7px;
    display:inline-block;
    overflow:hidden;
}
h1 {
    background:linear-gradient(#444, #000, #444);
    padding:5px;
    color:#FFF;
}
.indexr1 {
    display:inline-block;
    width:66%;
    height:710px;
    margin-right:5px;
    font-size:0;
    margin-bottom:10px;
}
.indexc1b {
    width:100%;
    font-size:0;
    height:355px;
}
.bl {
    vertical-align:top;
    width:33%;
    display:inline-block;
}
.blM {
    vertical-align:top;
    width:33%;
    display:inline-block;
    border-left:1px solid #BBB;
    border-right:1px solid #BBB;
}
.prev {
    text-align:justify;
}

编辑:Here's a Fiddle

Answer 1

设置文本溢出、溢出和空白。

.prev {
    text-overflow: ellipsis;
    overflow: hidden;     
    white-space: nowrap;
}

http://jsfiddle.net/Xp9kV/1/

注意:这仅适用于单行文本。