前提
初歩的ですが、レスポンシブの対応中、
ネットで調べて試してみてもうまくいきませんでした。
わかる方おられましたらご教授お願い致します。
実現したいこと
２点あります。
1 お知らせページのｐタグをレスポンシブで表に合わせて改行したい。
＜ｐタグはoverflow: hidden;
text-overflow: ellipsis;に指定している。＞
max-width,width90%を指定しても
折り返しができない。
2 全て見るボタンの最後の文字のる、を上の線の端に合わせたい。（レスポンシブの全てで）
▶︎は全て見るから7.56ｐｘ離して表示させたい。
該当のソースコード
html
<!-- ニュース -------------> <div class="news"> <h5>お知らせ</h5> <ul class="news-container"> <li class="news-container-list"> <a href="#"> <time datetime="2020-12-22">2020.12.22</time> <span>休診情報</span> <p>2021年1月の休診日は5日、17日、27日となります。</p> </a> </li><!-- ./news-container-list --> <li class="news-container-list"> <a href="#"> <time datetime="2020-12-11">2020.12.11</time> <span>イベント</span> <p>当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</p> </a> </li><!-- ./news-container-list --> <li class="news-container-list"> <a href="#"> <time datetime="2020-12-01">2020.12.01</time> <span>採用</span> <p>当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</p> </a> </li><!-- ./news-container-list --> <li class="news-container-list"> <a href="#"> <time datetime="2020-11-12">2020.11.12</time> <span>イベント</span> <p>ホームページをリニューアルしました。</p> </a> </li><!-- ./news-container-list --> <li class="news-button"> <a class="news-container-list-button" href="#">すべて見る</a> <a class="news-container-list-button-triangle" href="#">▶︎</a> </li> </ul><!-- ./news-container --> </div><!-- ./news -->
css
/* ニュース */ .news { padding-bottom: 112px; background-color: #F5FCF8;} .news-container { max-width: 1180px; height: auto; margin: 0 auto; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; border-radius: 30px; opacity: 1; list-style: none outside; padding-top: 39px; padding-bottom: 46px; padding-left: 0; width: 95%;} h5 { font-size: 24px; background: linear-gradient(transparent 70%, #99E5A5 70%); max-width: 96px; margin: 82px auto 70px; line-height: 38px; } .news-container-list { max-width: 1048px; margin: 0 auto; width: 90%;} .news-container .news-container-list a { border-bottom: 2px solid #E7E7E7; display: flex; align-items: center; flex-wrap: nowrap; text-decoration: none; padding: 19.5px 33px 19.5px 0;} time { font-size: 16px; color: #21A937;} .news span { background-color: #444444; width: 80px; height: 25px; line-height: 25px; margin-right: 30px; margin-left: 30px; text-align: center; color: #FFFFFF; font-size: 12px; flex-shrink: 0;} .news-container-list p { font-size: 16px; color: #444444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-button { text-align: right; max-width: 1121px; padding-top: 39.5px; } .news-container-list-button { color: #444444; font-size: 16px; line-height: 38px; max-width: 1048px; margin-right: 7.52px;}.news-container-list-button-triangle { color: #444444;} /* モバイル版 ----------------------------------*/ @media (max-width: 1140px) { /* ニュース */ .news-button{ padding-right: 2%; }} @media (max-width: 860px) { /* ニュース */ .news-container .news-container-list a { flex-direction: column; justify-content: start; flex-wrap: wrap; display: block; text-align: left; } .news-container-list p { width: 100%; max-width: 300px; overflow:initial; overflow-wrap: break-word; word-break: break-word; word-break: break-all; } .news-container-list { max-width: 300px; } .news span { display: inline-block; } .news-button{ padding-right: 2%; } }
試したこと
1 max-width,width90%を指定しても
折り返しができない。
レスポンシブ対応のみ改行したいのでbrは使いたくない。
2 レスポンシブ対応全てで上の線に合わせたいが、幅によってずれてしまいます。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント