Q&A
> text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
とのこと、垂直方向には効かないと思いますので、CSS では難しいです。
JavaScriptなど別の方法を考えた方がいいのでは。
ブートストラップのカードで商品一覧のようなページを作成したいのですが、テキストの文字数によって幅と高さが変わってしまいます。
高さと幅を決め、文字数が多いものについてはtext-overflow: ellips;で...と表示をしていきたいです。
文字数が多いものに合わせるコードは見つけましたが、上記のように表示する方法がわかりません。
初歩的な質問ですがお力になっていただきたいです。
コードは以下に添付しております。
aws cloud9
html
<!doctype html> <html lang="ja"></head> <div class="row row-cols-1 row-cols-md-3"> <div class="col mb-4"> <div class="card h-100"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">カードのタイトル</h5> <p class="card-text">これは、。</p> </div> </div> </div> <div class="col mb-4"> <div class="card h-100"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">カードのタイトル</h5> <p class="card-text">これは短いカードです。</p> </div> </div> </div> <div class="col mb-4"> <div class="card h-100"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="7.css"> <title>college/company</title>
css
@charset "UTF-8";
.row row-cols-1 row-cols-md-3 {
text-overflow: ellipsis;
}
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
回答ありがとうございます。
JavaScriptは全くしたことがないのですが、この場合JavaScriptのどの方法で考えて進めていけばよろしいでしょうか。よろしければ教えて頂きたいです、、、
質問は編集できますので。
いや、失礼しました。
ブラウザ対応が気になりますが、CSSで他の方法がありました。
回答1件
0
ベストアンサー
非標準的な機能ですが、-webkit-line-clamp を使うという手もあるかと思います。
一応、Firefox と Chrome で動作確認しました。
css
1.card-text{ 2 display: -webkit-box; 3 -webkit-box-orient: vertical; 4 -webkit-line-clamp: 1; 5 overflow: hidden; 6}
投稿2020/10/24 02:39
総合スコア36074
あなたの回答
tips
プレビュー
