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ません。

ノードにはノード コンテンツ 'TEST' の幅のみがあり、CSS プロパティがtitle追加されて、親ノードに相対的な幅になります。ui-btn-textwidth: 70%;

position: absoluteからドロップするtitleと、正しく動作します。しかし、モバイル (iphone) 統合で必要なため、そのプロパティを削除できません。それを正しくする方法は？

4

2 に答える 2

1

width:100%絶対配置された要素を on にすることはできません。

包含ブロックがブロック コンテナー要素に基づく絶対配置要素の場合、パーセンテージはその要素のパディング ボックスの幅に対して計算されます。これは、パーセンテージ幅が常に親要素のコンテンツ ボックスに対して計算されていた CSS1 からの変更です。

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

于 2012-10-31T13:07:50.997 に答える
0

span は使用せず、div を使用してください。

絶対要素を与える解決策は、 withwidth:100%;を変更することです。使用して配置するだけで機能します。position:absolute;position:relative;top:21px;left:0;

于 2012-10-31T13:35:14.907 に答える