Question

我一直试图将这个CSS应用到某些部分，但是尽管阅读了这个样式，并且记得要包含溢出：隐藏文本溢出，我无法让它工作。下面是一些没有文本溢出样式的代码。我需要在哪里申请？我以为它只是包含文本的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/

注意：这仅适用于单行文字。

应用文本溢出：正确的省略号

1 个答案: