html - 省略記号を使用してテストを適切にトリミングする方法

Question

次のようなhtmlがあります。

<td>
                 <h6 style="width:80px;text-overflow:ellipsis;" title="${name}"><span class="badge badge-info">${name}</span></h6>

</td>

テキストのサイズが表示領域よりも大きい場合に、テキストを点線で表示する方法。?

Answer 1

overflow: hidden動作させるために追加する必要がありますtext-overflow:ellipsis。そうしないと、コンテンツが要素から流出し、切り取られなくなります。

Answer 2

動作するには、ともtext-overflow:ellipsis;指定する必要がありoverflow: hidden;ますwhite-space: nowrap;。

すなわち

... style="width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" ...

ところで、そのインラインスタイル（および他のインラインスタイル）をCSSファイルに移動することをお勧めします。

Answer 3

そのはず ：-

<td>
<h6 style="width:80px;text-overflow:ellipsis;overflow:hidden" title="${name}"><span class="badge badge-info">${name}</span></h6>
</td>