2

画像を参照してください：

ここに画像の説明を入力してください

Javascriptを使用せずに、.elementsのテキスト（最後にhtmlを表示）が長すぎる場合、それを分離することを灰色の領域の2行に配置したいと思います。

「Helloworld！Hello StackOverFlow！」分離する必要のあるテキストです。

**何かが足りないと思う場合、または私が自分自身を十分に説明しなかった場合は、あなたが知りたいことを提供するために最善を尽くしますと尋ねてください;）

HTML

<div class="filter">
    <div class="left"></div>
    <div class="center">
        <div class="arrow">Search Filter Research Text Test</div>
        <div class="head"></div>
        <div class="element"><div>Hello World! Hello StackOverFlow!</div></div>
    </div>
    <div class="right"></div>
</div>

CSS

.table .filter {
    height: 44px;
    position: relative;
}


.table .filter div {
    height: 44px;
}

.table .filter .left {
    width: 7px;
    position: absolute;
    left: 0;
    background: url('../images/Tableau/filtre/gauche.png') no-repeat;
}

.table .filter .right {
    width: 7px;
    position: absolute;
    right: 0;
    background: url('../images/Tableau/filtre/droit.png') no-repeat;
}

.table .filter .center {
    background: transparent url('../images/Tableau/filtre/centre.png') repeat-x;
    left: 7px;
    right: 7px;
    position: absolute;
}

.table .filter .center>div {
    float: left;
}

.table .filter .center .arrow {
    background: url('../images/Tableau/filtre/fleche-centre.png') repeat-x;

}

.table .filter .center .head {
    width: 13px;
    background: url('../images/Tableau/filtre/fleche.png') no-repeat;   
}

.table .filter .center .element {
    text-align: center;
    margin: auto;
}

.table .filter .center .element>div {
    width: 100%;
    text-align: center;
}
4

2 に答える 2

1

このフィドルを試してください

http://jsfiddle.net/XkgA7/21/

高さを調整する必要がありますが、これはあなたが探している動作のようです。

于 2012-06-07T15:53:35.677 に答える
0

次の CSS を に追加してみてください.element。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

これにより、テキストがコンテナに収まりきらないほど長くなることがなくなります。

ただし、これが失敗した場合は、CSS の別の場所に問題があり、コンテナー自体が大きくなりすぎています。これはほぼ確実にwidth: 100%の によるものelement>divです。それを取り除いてみてください。

于 2012-06-07T15:10:39.073 に答える