1

このフィドルでは、次のような div が表示されます。

http://jsfiddle.net/tickzoom/gzREg/

<div class="excerpt">
    <div class="excerpt-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
            scelerisque aliquet. Aenean tincidunt cursus adipiscing. Phasellus viverra
            facilisis tortor. Pellentesque interdum scelerisque eros, id auctor est
            porttitor at. Vestibulum semper lacus sed ipsum varius eu semper erat condimentum.
            </p>
    </div>
    <div class "excerpt-more">
        <p>Learn more</p>
    </div>
</div>

そして、次のようにスタイルします。

.excerpt {
    position: absolute;
    width: 200px;
    height: 100%;
}
.excerpt-text {
    width: 100%;
    height: 80px;
    padding: 5%;
}
.excerpt-more {
    height: 20px;
    width: 100% color: red;
}

フィドルで、最初の div のリップサム テキストが 2 番目の div の Learn More テキストをオーバーランしていることに注意してください。テキストは、ページ全体のサイズが変更されたときに表示されるテキストの量が増減しても、[詳細] が常に表示されるように、上部の div 内に境界を設定する必要があります。

Genesis Responsive Sliderと呼ばれるGenesis FrameworkのWordPressのプラグインからこれが機能するサイトがあるため、私が見逃している、または間違っている単純なものがあるに違いありません. 彼らのプラグインの問題点は、"Learn More" リンクがテキストの後に続くため、小さい画面では境界ボックスの外に消えてしまうことです。

そのため、プラグイン PHP コードに 2 番目の div を導入して、小さい画面サイズで [詳細] リンクが消えないようにする計画です。

問題の仮開発サイトを見たい方はこちら http://side.tickzoom.com

4

3 に答える 3

1

試す

.excerpt{text-overflow: ellipsis;}

ただし、必要なすべてのブラウザで機能することを確認してください。これは、CSS3プロパティであり、ほとんどのブラウザではそれほど前には機能していません。

編集：上記のoverflow：hiddenとの組み合わせが最善の方法かもしれません。

于 2013-03-08T12:40:58.407 に答える
1

こんな感じですか？

jsFiddle を参照してください

.excerpt-text {
    overflow:hidden;
}

次に、テキストサイズを大きくすることは、の高さをサイズ変更する別の問題です.excerpt-text。

jsFiddle を参照してください

.excerpt-text {
    height: 50%;
}

編集:次のルールを削除してみてください

html > body .slide-excerpt-border {
    float: left;
}

html > bodyまた、このルールから削除する必要があるため.slide-excerpt-border、開始部分は冗長です。

編集：あなたがそれを修正している間、私はこれをしました

ここに画像の説明を入力

私はこれを追加しました：

.slide-excerpt-border {
    height: 95%;
    display: block;
    overflow: hidden;
}

Learn Moveアンカーを下に移動しました.slide-excerpt-border

于 2013-03-08T12:39:35.740 に答える
0

さまざまな画面タイプに対してレスポンシブ メディア クエリを使用する必要があります。

ここに例とその使用方法の説明がありますhttp://css-tricks.com/css-media-queries/

またはこれについて別の質問がありました

div コンテンツをレスポンシブにする

于 2013-03-08T12:43:45.680 に答える