Q&A
#text-overflowについて
message-boxからはみ出したmessageは...と表示したいです
message-content要素に
overflow:hidden;
text-overflow: ellipsis;
を指定してみましたがうまく行ってはいません（悟空のメッセージ)。
どのようにすればはみ出した要素を...と表記できるのでしょうか？
アドバイスいただけると幸いです。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5<meta name="viewport" content="width=divece-width,initial-scale=1.0"> 6<title>メッセージボックス</title> 7<link 8 href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" 9 rel="stylesheet"> 10<link rel="stylesheet" href="/css/style.css"> 11</head> 12<body> 13 <div class="message-box-wrapper"> 14 <h1 class="message-box-title">メッセージBOX</h1> 15 <div class="message-box"> 16 <a href="/profile/2/message" ></a> 17 <div class="message-header"> 18 <img src="/image/2" 19 class="message-box-image" /> 20 <p class="message-box-user-name">悟空</p> 21 <p class="message-box-time">03/26 15:42</p> 22 </div> 23 <p class="message-box-content">あああああああああああああああ 24あああああああああああああああ 25あああああああああああああああ 26あああああああああああああああ 27あああああああああああああああ 28あああああああああああああああ 29あああああああああああああああ 30あああああああああああああああ 31あああああああああああああああ 32あああああああああああああああ 33あああああああああああああああ 34あああああああああああああああ 35あああああああああああああああ 36あああああああああああああああ 37あああああああああああああああ 38あああああああああああああああ</p> 39 </div> 40 <div class="message-box"> 41 <a href="/profile/3/message" ></a> 42 <div class="message-header"> 43 <img src="/image/3" 44 class="message-box-image" /> 45 <p class="message-box-user-name">ブルマ</p> 46 <p class="message-box-time">03/25 18:54</p> 47 </div> 48 <p class="message-box-content">hey</p> 49 </div> 50 </div> 51</body> 52</html>
CSS
1.message-box-wrapper { 2 padding: 80px 0; 3 min-height: 500px; 4 background-color: #f4f8fa; 5} 6 7.message-box { 8 width: 700px; 9 height: 100px; 10 padding: 20px 20px; 11 margin: 20px auto; 12 background-color: #f7f7f7; 13 border: 1px solid #d5d5d5; 14 box-shadow: 0px 5px 2px rgba(30,30,30,0.1); 15 position: relative; 16} 17 18.message-box :hover { 19 background-color: rgba(0,0,0,0.1); 20} 21 22.message-box a { 23 display: block; 24 position: absolute; 25 top: 0; 26 left: 0; 27 width: 100%; 28 height: 100%; 29} 30 31.message-box-title { 32 padding-bottom: 10px; 33 border-bottom: 2px solid #dee7ec; 34 text-align:center; 35 font-size: 28px; 36 font-family:"Hiragino Kaku Gothic ProN"; 37 color:#5f5d60; 38} 39 40.message-header { 41 display:flex; 42} 43 44.message-box-image { 45 border-radius: 50%; 46 width: 30px; 47 height: 30px; 48 margin-right: 20px; 49} 50 51.message-box-user-name { 52 height: 30px; 53 padding-right: 20px; 54 margin:0; 55} 56 57.message-box-time { 58 height: 30px; 59 margin:0; 60} 61 62.message-box-content { 63 overflow:hidden; 64 text-overflow: ellipsis; 65} 66 67
回答1件
0
ベストアンサー
message-content要素に
overflow:hidden;
text-overflow: ellipsis;を指定してみましたがうまく行ってはいません（悟空のメッセージ)。
HTMLのソースにも、CSSのソースにも、「message-content」という文字列が見当たりません。
ので、「message-box-content」だと解釈します。
.message-box-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
ちなみに「text-overflow: ellipsis;」は1行のときしか使用できません。
複数行でも「...」で省略したいときは以下を参考にしてみてください。
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | PSYENCE:MEDIA
【CSS】複数行でも3点リーダーをきかせる - Qiita
投稿2020/03/26 07:30
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/26 07:57
2020/03/26 11:37