1

プロパティを使用text-indentして、テキストの最初の行を左隅のいずれかの側にインデントすることができます。次の例を検討してください。

h1 { text-indent: -200px; margin-left: 200px; }

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula molestie imperdiet.</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Mauris   vehicula   molestie
                            imperdiet.
|---------- 200px ----------+------ 100% - 200px ------|
|-------------------------->| left margin
|<--------------------------| negative text indent

これを逆に行うためのトリックはありますか:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris   vehicula   molestie
imperdiet.
|------ 100% - 200px ------+---------- 200px ----------|

私が欲しいのは、テキストの最初の行 (および最初の行のみ) が左端を超えて 200px 拡張されることです。おそらく、右端の周りにインデントを適用したり、テキストの 2 行目以降に適用したりする同様の CSS プロパティがあります。

ここにjsFiddleがあります

4

3 に答える 3

0

私が理解しているように、あなたの期待される結果は次のようなものです：

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. 
Mauris vehicula 
molestie imperdiet.

これを行う最も簡単な方法は、Javascript を使用することです。2 行目以降の行を検出し、200px のパディング ライトでタグをラップすることができます。

これを行うには、jQuery または類似のツールを使用する必要がある場合があります。

疑似要素に幅/高さやパディングを設定することはできません:first-line。

于 2013-06-19T12:59:45.907 に答える
0

これはあなたが欲しいですか？

h1.other-way-round {
    margin-left: 0px;
    text-indent:0px
}

デモ

2番目の方法

h1.other-way-round{
    text-indent:0;
    position:relative;
    width:100%;
    left:-200px;
   }

デモ

于 2013-06-19T12:18:47.263 に答える
0

text-indent は親から来る可能性があります。パディング付き。

http://jsfiddle.net/qsDST/

#wrapper {
    width: 300px;
    text-indent: -200px;
    padding-left:200px;
}
h1 {
    background: lime;
    display:inline;
}
于 2013-06-19T11:59:19.020 に答える