[解決済み] テーブルセルでCSS省略記号が機能しないのはなぜですか?
2022-04-25 12:35:07
質問
次のような例を考えてみましょう: ( ライブデモはこちら )
$(function() {
console.log("width = " + $("td").width());
});
td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
と出力されます。
width = 139
となり、省略記号が表示されない。
何が足りないのでしょうか?
解決方法は?
どうやら、追加するようです。
td {
display: block; /* or inline-block */
}
も同様に問題を解決します。
もう一つの可能な解決策は
table-layout: fixed;
を設定し、さらにそのテーブルの
width
. 例えば
http://jsfiddle.net/fd3Zx/5/
関連
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] セルフクローズスクリプトエレメントが機能しないのはなぜですか?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] テーブルセルでCSSテキストオーバーフロー?
-
[解決済み] CSS text-overflow: ellipsis; が効かない?
-
[解決済み] CSSを使用してテーブルの行の色を交互に変更しますか?
-
[解決済み] なぜCSSは偽の要素で動作するのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] mailto:を使ってメールの件名や内容を設定することはできますか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み] テーブルセルでCSSテキストオーバーフロー?
-
[解決済み] 解決済み】複数行のテキストに省略記号を適用する [重複] [重複]