0

HTML

<span class="ui-btn-inner">
    <span class="ui-btn-text">TEST
        <span class="title">
            Name<br>Professional
        </span>
    </span>
</span>

CSS

.ui-btn-text .title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
}
.ui-btn-inner .ui-btn-text .title {
    display: none;
    font-size: 0.77em;
    font-weight: normal;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 21px;
}

这里ui-btn-inner类节点具有窗口的全宽（假设该节点的宽度为 1000px）。内部节点ui-btn-text并且title没有父节点的相对宽度。

该title节点只有ui-btn-text节点内容'TEST'的宽度，其中width: 70%;添加了一个CSS属性以使宽度相对于父节点。

position: absolute如果我从下降title，它将正常工作。但我不能放弃该属性，因为移动（iphone）集成需要它。如何使它正确？

4

2 回答 2

1

您不能拥有width:100%绝对定位的元素。

对于包含块基于块容器元素的绝对定位元素，百分比是根据该元素的填充框的宽度计算的。这是从 CSS1 的一个变化，其中百分比宽度总是相对于父元素的内容框计算。

参考：http ://www.w3.org/TR/CSS21/syndata.html#value-def-percentage

于 2012-10-31T13:07:50.997 回答
0

不要使用 span，请使用 div。

给出width:100%;绝对元素的解决方案是position:absolute;用position:relative;. top:21px;如果您只使用和left:0;定位，它将起作用。

于 2012-10-31T13:35:14.907 回答