[解決済み] コンテンツが広すぎる場合、HTMLタグに省略記号(...)を挿入する
2022-04-28 10:58:41
質問
ブラウザのウィンドウサイズを変更すると幅が変わるエラスティックレイアウトのウェブページがあります。
このレイアウトでは、見出し(
h2
) は、可変長です (実際には、私がコントロールできないブログ記事の見出しです)。現在、ウィンドウより幅が広い場合は、2行に分割されています。
例えばjQueryを使用して、見出しタグのinnerHTMLを短くし、テキストが現在のスクリーン/コンテナ幅で1行に収まらない場合は"..."を追加する、エレガントでテスト済みの(クロスブラウザ)ソリューションはありませんか?
解決方法は?
FF3、Safari、IE6+で、一行と複数行のテキストで動作する解決策を得ました。
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>
jquery.ellipsis.js
(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);
if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
})(jQuery);
関連
-
要素ツリー制御によるvueTreeテーブル
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] HTMLフォームのSELECTタグ/入力の読み取り専用化
-
[解決済み] htmlの<base>タグの推奨事項を教えてください。
-
[解決済み] フレックスアイテムがコンテンツサイズ以上に縮小されないのはなぜですか?
-
[解決済み] CSSで背景画像を幅に合わせ、高さは比例して自動縮小する
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
JavaScriptのクロージャの説明
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】CSSで、複数行のブロックがはみ出した場合、「...」を使用する。
-
[解決済み】CSSで長い文字列を切り捨てる:まだ実現可能か?
-
[解決済み] div 内でテキストを 2 行で折り返す