CSS文本浮点对齐

时间:2012-06-07 14:47:08

标签: html css xhtml

见图片:

enter image description here

我希望,不使用Javascript,如果.elements的文本(查看末尾的html)太长,则将它分开放置在灰色区域中的两行。

“Hello world!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;
}

2 个答案:

答案 0 :(得分:1)

试试这个小提琴

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

需要调整高度,但这似乎是您正在寻找的行为。

答案 1 :(得分:0)

尝试将以下CSS添加到.element

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

这将确保您的文本永远不会太长,无法容纳在其容器中。

但是,如果失败了,那么CSS中的其他地方就会出现问题,容器本身也会变得太大。这几乎肯定是因为width: 100%中的element>div。尝试删除它。