3

テキストをフォーマットしたい：

title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,

のように見えるように：

title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis  urna.
        Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum
        mauris massa, venenatis non dignissim vestibulum,

変更テキストを手動で追加せずに、どのソリューションにも興味があります。

どんな助けでも大歓迎です。

4

3 に答える 3

1

HTML

<div class="title">title</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis  urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum, 
</div>​

CSS

​.title { float: left; }
.title:after { content: '-'; display: inline-block; margin: 0 5px; }
.text { overflow: hidden; }​

jsFiddle デモ

タイトルは左にフロートされ、新しいブロック フォーマット コンテキストを確立するoverflow: hidden;ために使用されます。デフォルト以外の任意の値でこれを行うことができます。overflowvisible

これで完全にクロスブラウザーではない唯一のものは:after疑似要素 ( IE8 から動作-) ですが、代わりに HTML でstatic を使用することができます。この方法を選択したのは、この方法の方がすっきりしていて、マークアップに不要なスタイルが含まれていないためです。

h1タイトルには、適切なヘッダー ( 、h2など) など、より意味のあるものを使用できます。

于 2012-07-06T08:47:32.097 に答える
1

高速で汚れたソリューション:

<pre>
    <!-- your text stuff -->
</pre>
于 2012-07-06T08:38:13.213 に答える
0

margin疑似クラスとtext-indent一緒に遊んで:first-line、目的の効果を得ることができます: 関連する CSS は次のとおりです。

p { text-indent: -2.35em ; margin-left: 2.35em  }
p:first-line { margin-left: -2.35em }

フィドルの例: http://jsfiddle.net/nb88K/

"title"選択した値は、単語の幅に厳密に依存することに注意してください。

補足として、マークアップ自体を変更できる場合は、代わりにその単語をテキストから疑似クラスのcontentプロパティに移動することをお勧めし:beforeます。テキストがタイトルであるという事実は、セマンティックの観点から、要素の選択 (つまり、<hn>タグを選択します)

于 2012-07-06T09:53:35.530 に答える