2

ロールオーバーすると、赤い背景に白いテキスト行が表示される画像があります。以下にリンクされている画像のように、テキスト行の区切りごとにストリップに区切りを付けたいと思います。

http://imgur.com/ElmaEom

ただし、これまでに行ったことは、テキストを 1 つの大きな赤いブロックで表示することだけです。画像の 80% に対してテキストが大きすぎる場合、どこで改行するかをテキストに認識させ、その後ろに新しい赤い帯を付けて新しい行に表示させたいと考えています。

ここに私がこれまでに持っているもののフィドルがあります。

http://jsfiddle.net/mAU3d/ 

.thumb {
    position: relative;
    float: left;
}

.text, .text-js {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6em;
    line-height: 1.6em;
    display: none;
    position: absolute;
    top: 15px !important;
    left: 0px;
    text-align: left;
    background: #999;
    background-color: #F63146;
    width:80%;
    padding: 1%;
    display: inline;
    color: #FFF;
    text-transform: uppercase;
}

説明がわかりにくかったらすみません、よろしくお願いします。

4

3 に答える 3

4

ただし、これまでに行ったことは、テキストを 1 つの大きな赤いブロックで表示することだけです。

これがブロック要素のレンダリング方法です。(使用しようとするdisplay:inlineと、要素が自動的に作成される絶対配置の使用によって妨げられますblock。)

しかし、あなたは のh2中に要素を持っているdivので、それを作って inlineください。悲しいことに、インライン要素の破線のすべての側面にパディングを入れることはできませんが、効果のために背景色だけが必要な場合は、box-shadow.

.text-js h2 {
    display:inline;
    background: #F63146;
    box-shadow:-5px 0 #F63146, 5px 0 #F63146;
}

http://jsfiddle.net/mAU3d/5/

于 2013-11-05T12:13:30.203 に答える
0

偽のボックスシャドウを使用する必要はないと思います（編集：ボックスシャドウは実際に便利です。コメントを参照してください）。テキストを含むブロックではなく、テキスト自体のスタイルを設定する必要があります（つまり、スパンを使用） (これは h2 です): http://jsfiddle.net/mastazi/M6APy/

<h2 class="text"><span class="break">Text should break in to new strips</span></h2>

.break{
    background-color: #F63146;
    line-height: 1.6em;
}
于 2013-11-05T12:22:27.733 に答える