width、max-widthは<td>には適用されません

0
投票

テキストが長すぎる場合に備えて、最大幅を設定する必要があります。 「width」と「max-width」を設定しようとしましたが、うまくいきませんでした。

テキストが長すぎる場合に備えて、最大幅を設定する必要があります。 「width」と「max-width」を設定しようとしましたが、うまくいきませんでした。

長すぎるテキストでどのように見えるか。

長すぎるテキストでどのように見えるか。

長すぎるテキスト

too long textテキストが長すぎます
<tr>
<td class="no-wrap">
<div class="grid-item-margin-left">@Html.DisplayFor(m=> checkListItem.StepNumber).</div>
</td>
<td>
@Html.DisplayFor(m=> description)
</td>
<tr> <td class="no-wrap"> <div class="grid-item-margin-left">@Html.DisplayFor(m=> checkListItem.StepNumber).</div> </td> <td> @Html.DisplayFor(m=> description) </td>
@Html.DisplayFor(m=>checkListItem.StepNumber)。
@Html.DisplayFor(m=>説明)

私の問題はにあります

私の問題はにあります
<td>
@Html.DisplayFor(m=> description)
</td>
<td> @Html.DisplayFor(m=> description) </td> @Html.DisplayFor(m=>説明)

このソリューションを試しました:

このソリューションを試しました:
<td>
<p style="max-width:60ch">@description</p>
</td>
<td> <p style="max-width:60ch">@description</p> </td>

@description

ただし、2番目の画面の結果:

2番目の画面の結果:

text override

text overrideテキストオーバーライド

更新: アドバイスありがとうございます!私はこれを試しました

更新: アドバイスありがとうございます!私はこれを試しました
.long-text-trim {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 60ch;
}
.long-text-trim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; } .long-text-trim { 空白:nowrap; オーバーフロー:非表示; テキストオーバーフロー:省略記号; 最大幅:60ch; }

そしてそれは機能します。 だが!別の問題があります。ウィンドウを最小化するときに、テキストをさらにトリミングしたいのです。これを実装する方法は?

そしてそれは機能します。 だが!別の問題があります。ウィンドウを最小化するときに、テキストをさらにトリミングしたいのです。これを実装する方法は?

ソース

css html razor

1 -Julien Baldy

3 -Pete

1 答える

興味があるかもしれません

© 2021   KonnichiwaSekai.Com