フォーススパンがリストインジケータのように機能するようにする

Question

こんにちは！

私の問題を提示しましょう！

私は巨大なテーブルを持っています。細胞は空にすることができ、以下を含むことができる：

<span>[short text]</span> longer text

このテーブルには、セルの幅が異なる画面に変えることができる、幾分応答するので、コンテンツを複数の行に分割することができます。達成したいのは、改行がある場合、<span>の外側のテキストをインデントすることです。このような何か：

[short text] longer text, which is 
      broken into two lines 

私はそれが必要だ場合は、テーブルを再構築することができますあまりにも<span> -sで「長いテキストを」囲むために、しかし、あなたが賢く解決策を持っている場合、私はそれまでだろう。

Answer 1

の2つのdiv要素を使用してtable-cellsとしてそれらの両方を表示することができます。

td { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
td>span { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
} 
 
td>span:first-of-type { 
 
    white-space: pre; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span>short text</span> 
 
     <span>long text long text long text long text long text long text long text long text long text long text long text </span> 
 
    </tr> 
 
</table>

Answer 2

多分あなたはそのspanの両方で「短いテキスト」と「長いテキストを」置くことによってあなたが行うことができます代わりに

<tr><td> 
<div id=short style='float:left'>[short text]</div> 
<div id=short style='float:left'>[long text]</div> 
</td> 
</tr> 

Answer 3

あなたは<div>の代わりを使用できる場合。 word-break: break-all;は良い選択肢です。

td div { 
 
    width: 100px; 
 
    height: 300px; 
 
} 
 
.wordwrap { 
 
    word-break: break-all; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td> 
 
     <div class="wordwrap"> 
 
     asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="wordwrap">test</div> 
 
    </td> 
 
    </tr> 
 
</table>