5

2013-01-04 更新

  • フレックスボックス ソリューションは、余分な HTML / CSS をほとんど作成しません。ただし、Firefox と IE10 で動作するかどうかは不明ですか?
  • :beforeHTML の代わりに CSS コンテンツにマイナス文字を追加する方が良い方法です。

情報

いくつかのコンテンツを含むテーブルがあります。深さに応じて、テキストの前にいくつかのマイナス文字があります。

問題/質問

改行が発生した場合でも、テキストを右揃えにし、マイナス文字を左揃えにする方法がわかりません。マイナスの数とテキストの長さはさまざまです。

jsfiddle の例

気が向いたら編集...

http://jsfiddle.net/Rjvc9/

jsfiddle が機能しない場合の HTML

<table>
    <td>            
        <span class="lines">----</span> <span class="text">My page that is far too long for it to fit on one row</span>
    </td>
</table>

<br>

This is how it should work.<br><br>

<table>
    <td>            
        <span class="lines">----</span> <span class="text">My page that is far<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;too long for it to fit<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on one row</span>
    </td>
</table>​

jsfiddle が機能しない場合の CSS

table {
    background: #eee;
    width: 150px;
}

td {
    font-family: Arial;
    font-size: 14px;
    line-height: 18px;
    margin: 40px;
}​

私の考え

  • インデントを巧妙な方法で使用できると思いましたが、うまくいかないようです。
  • 私はディスプレイが好きです：インライン。このまま維持できれば良いのですが、それは無理ではないでしょうか？
  • マイナス文字が少なく、テキストが長い/短い場合に機能するはずです。
  • 古いブラウザで動作する必要はありません。
  • jQuery / javascript よりも CSS の方が好きです。
4

6 に答える 6

20

ネガを使おtext-indentう！

Atext-indentは最初の行をインデントします。負の値を指定してください。

.first-line {text-indent: -5em; padding-left: 5em;}
于 2013-01-04T14:20:12.757 に答える
4

このような何かがそれを行う必要があります:

display: block;
padding-left: 37px;
text-indent: -37px;

最初の行に負のインデントを付けて、X ピクセル左に配置します。要素全体に同じ量の px の padding-left を与えると、すべてが再び正しい場所に配置されます。

参照: http://jsfiddle.net/Rjvc9/3/

注：display: inlineこれでは機能しません。display:inline-block意思。

于 2013-01-04T13:26:29.397 に答える
0

要素を使用しているのでtable、「マイナス文字」（実際には、ASCIIハイフン、正式にはHYPHEN-MINUS文字）を独自の列に配置します。また、マークアップを有効にする必要があります（td要素はの子になりますtr）。

<table>
  <tr>
    <td class="lines">----</td>
    <td class="text">My page that is far too long for it to fit on one row</td>
</table>

CSSで、を追加しtd { vertical-align: top; }ます。<tr valign=top>（または、すべてのtr要素に対応するHTMLマークアップを追加します。

列はデフォルトで左揃えになり、必要に応じて調整できます。最近のブラウザでは、たとえばセレクタをclass使用できるため、属性も必要ありません。td:first-childtd:first-child + td

于 2013-01-04T18:13:02.477 に答える
0

セルが境界線で囲まれない限り、フレックスボックスはここで機能します。

td.dashed {
    display: -webkit-flex;
    display: flex;
}

デモは、スパンまたは before 疑似要素のコンテンツを使用して破線を含むように動作します。IE10より古いものでは動作しません。Mozilla はこれを好まないようですが、flexbox をサポートするはずです。

http://jsfiddle.net/Rjvc9/9/

于 2013-01-04T14:17:25.863 に答える
0

CSS のcontent属性を使用すると、マイナス文字をページに挿入し、それらを HTML に含めたり、タグでラップしたりすることなく、配置/スタイルを設定できます。

私はあなたの例を修正しましたhttp://jsfiddle.net/cchana/Rjvc9/2/そして、セルにパディングと位置属性を次のように与えることで機能するようになりました:

td {
    padding: 0 0 0 24px;
    position: relative;
}

----次に、セルの先頭に文字を追加して、content正しく配置しました。

td:before {
    content: '----';
    left: 0;
    position: absolute;
}
于 2013-01-04T13:28:41.147 に答える