[解決済み] text-overflow: 省略記号が機能しない
2022-01-30 04:03:10
質問
私が試したのはこれです( ここで ):
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
}
本来は、ウィンドウを小さくしたときに、spanをellipisで縮小したいのですが。何がいけなかったのでしょうか?
どうすればいいですか?
CSSが必要です。
overflow
,
width
(または
max-width
),
display
および
white-space
.
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
<span>Test test test test test test</span>
追記 ラインクランプ(Multiline Overflow Ellipses)を行うためのテクニックの概要を知りたい場合は、このCSS-Tricksのページを見てください。 https://css-tricks.com/line-clampin/
追記2
(2019年5月)
このように
リンク
は、Firefox 68 でサポートされると主張しています。
-webkit-line-clamp
(!)
関連
-
[解決済み] span with onclick event inside the tag
-
[解決済み] CSS - display: none; が機能しない
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] ホバー時に背景画像を暗くする
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] CSS text-overflow: ellipsis; が効かない?
-
[解決済み】HTMLのtext-overflowの省略記号の検出
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】html文書に縦の空白を挿入するには?
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?