5

装飾的な引用符で囲まれた段落があります。レイアウトは流動的で、ある程度の幅では装飾的な引用符だけが折り返されますが、これは避けたいと思います。

スクリーンショット:

*スクリーンショット*

コード : http://jsfiddle.net/84EDh/1/ (注: Chrome 以外ではテストされていません)

<p>
    <span class="bigchar ldquo"></span>
    Begin paragraph [...paragraph content...] end paragraph.
    <span class="bigchar rdquo"></span>
</p>

CSS:

p { position: relative; }
.bigchar {
    display: inline-block;
    width: 20px;
}
.bigchar:after {
    color: #aaa;
    font-size: 50px;
    position: absolute;
}
.ldquo:after {
    content: '“';
    top: -10px;
}
.rdquo:after {
    content: '”';
    bottom: -30px;
}

考えられる解決策:

最後の単語を別のスパンで閉じるスパンでラップします

[...paragraph content...] end 
<span class="nowrap">
    paragraph.
    <span class="bigchar rdquo"></span>
</span>

質問：

span段落の最後の部分をラップしないようにするためのよりエレガントな方法はありますか?

これはあまりセマンティックではなく、実現も簡単ではありません。ご想像のとおり、段落のコンテンツは動的であり、テンプレート レベルで分割するのは容易ではありません。

編集：cssが追加されました

4

5 に答える 5

2

を使用する代わりに、 を使用するspanことをお勧めしますq。なぜなら、q要素はそのために設計されているからです!

したがって、HTMLは次のようになります

<p><q class="bigchar">This text is surrounded by quotes. I want
the text to wrap according it's parent width. This is no problem,
it's the default behaviour. However, I would like to avoid the
last span, containing a decoration quote, to wrap.</q></p>

CSSで

q.bigchar::before {content:'\201C'; font-size:2em; line-height:0;
position:relative; top:.3em; margin-right:.13em;}

q.bigchar::after {content:'\201D'; font-size:2em; line-height:0;
position:relative; top:.3em; margin-left:.13em;}

このフィドルになります。

追加のマークアップは必要ありません。

をそのままにしておくので、pあらゆる種類のスタイル ( などtext-indent) を適用でき、本来の動作をすることに注意してください。

于 2013-10-19T11:13:08.180 に答える
1

spanother の中に入れ子にするのはspanどうですか？

この方法で達成したのは、rdquo が通常のテキストとして機能することです (つまり、rdquo と最後の単語の間にスペースを入れないか、改行なしのスペースを入れても、2 行に分割されません)。

デモはこちら: http://jsfiddle.net/HFE9T/1/

于 2013-10-18T13:04:27.850 に答える
0

これは、Michal Rybak に触発された、期待される動作を実現するための最終的なマークアップと CSS ですが、妥協はありません (spanマークアップの 2 つを除く) :

HTML :

<p>
    <span class="quote" attr-char="&ldquo;">&nbsp;</span>
    Paragraph content Here. 
    Note the no-line-break here.<span class="quote" attr-char="&rdquo;">&nbsp;</span>
</p>

attr-char属性は、要素と同様に、さまざまな言語の引用文字を変更できるため、非常に便利です(q多少)

CSS :

p .quote { 
    position: relative;
    margin-right: 30px; /* Indent text at paragraph beginning */
}
p .quote:before {
    position: absolute; 
    top: 10px;
    line-height: 20px;
    font-size: 50px;
    content: attr(attr-char); /* Take the character from markup */
}
p .quote:last-child:before {
    margin-left: 10px; /* Give the closing quote some space */
}

フィドル：

http://jsfiddle.net/HFE9T/4/

于 2013-10-18T15:31:17.787 に答える
0

追加の span 要素を使用する代わりに、次のように段落で :before と :after を使用してみてください。

p:after {
    color: #aaa;
    font-size: 50px;
    position: absolute;
    content: '”';
    bottom: -30px;
}
p:before {
    color: #aaa;
    font-size: 50px;
    position: absolute;
    content: '“';
    top: -10px;
}

ここでフィドルを更新しました

于 2013-10-18T13:03:41.273 に答える