[解決済み] 解決済み】複数行のテキストに省略記号を適用する [重複] [重複]
2022-04-16 20:57:58
質問
高さが20%のdiv内の最終行に省略記号を追加する解決策はありますか?
私は
-webkit-line-clamp
という関数がありますが、私の場合、ウィンドウサイズによって行数が変わってしまいます。
p {
width:100%;
height:20%;
background:red;
position:absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>
この問題を説明するために、次のJSFiddleを用意しました。 https://jsfiddle.net/96knodm6/
解決方法は?
ようやく、私が望むことを実現するための解決策を見つけました。
それは
p
をパラグレーフに、そして
article
ラッパーです。
に省略記号を適用したい場合
p
に応じて
article
の高さ (これはウィンドウの高さにも依存します) を取得する必要があります。
height
の
article
は、その
line-height
の
p
で、次に
articleHeight/lineHeight
の数を求めます。
line-clamp
を動的に追加することができます。
だけです。
line-height
はcssファイルで宣言する必要があります。
次のコードを確認してください。ウィンドウの高さを変更すると
line-clamp
が変更されます。それを狙ったプラグインを作るといいかもしれませんね。
function lineclamp() {
var lineheight = parseFloat($('p').css('line-height'));
var articleheight = $('article').height();
var calc = parseInt(articleheight/lineheight);
$("p").css({"-webkit-line-clamp": "" + calc + ""});
}
$(document).ready(function() {
lineclamp();
});
$( window ).resize(function() {
lineclamp();
});
article {
height:60%;
background:red;
position:absolute;
}
p {
margin:0;
line-height:120%;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>
関連
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み] text-overflow: 省略記号が機能しない
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] カーソルを指ポインタに変更
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] :last-child が期待通りに動作しない?
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] HTML Divのボーダーが表示されない
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] 必要なキーに一致するルートがありません。[:id]
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?