レスポンシブでpタグを改行させたい　ボタンの配置を表の線に合わせたい

前提

初歩的ですが、レスポンシブの対応中、
ネットで調べて試してみてもうまくいきませんでした。
わかる方おられましたらご教授お願い致します。

実現したいこと

２点あります。

1　お知らせページのｐタグをレスポンシブで表に合わせて改行したい。
＜ｐタグはoverflow: hidden;
text-overflow: ellipsis;に指定している。＞
max-width,width90%を指定しても
折り返しができない。

2 全て見るボタンの最後の文字のる、を上の線の端に合わせたい。（レスポンシブの全てで）
▶︎は全て見るから7.56ｐｘ離して表示させたい。

該当のソースコード

html
1<!--  ニュース  ------------->
2        <div class="news">
3            <h5>お知らせ</h5>
4            <ul class="news-container">
5                <li class="news-container-list">
6                    <a href="#">
7                        <time datetime="2020-12-22">2020.12.22</time>
8                        <span>休診情報</span>
9                        <p>2021年1月の休診日は5日、17日、27日となります。</p>
10                    </a>
11                </li><!-- ./news-container-list -->
12
13                <li class="news-container-list">
14                    <a href="#">
15                        <time datetime="2020-12-11">2020.12.11</time>
16                        <span>イベント</span>
17                        <p>当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</p>
18                    </a>
19                </li><!-- ./news-container-list -->
20
21                <li class="news-container-list">
22                    <a href="#">
23                        <time datetime="2020-12-01">2020.12.01</time>
24                        <span>採用</span>
25                        <p>当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</p>
26                    </a>
27                </li><!-- ./news-container-list -->
28
29                <li class="news-container-list">
30                    <a href="#">
31                        <time datetime="2020-11-12">2020.11.12</time>
32                        <span>イベント</span>
33                        <p>ホームページをリニューアルしました。</p>
34                    </a>
35                </li><!-- ./news-container-list -->
36
37                <li class="news-button">
38                    <a class="news-container-list-button" href="#">すべて見る</a>
39                    <a class="news-container-list-button-triangle" href="#">▶︎</a>
40
41                </li>
42            </ul><!-- ./news-container -->
43        </div><!-- ./news -->

css
1/* ニュース */
2
3.news {
4    padding-bottom: 112px;
5    background-color: #F5FCF8;
6}
7
8.news-container {
9    max-width: 1180px;
10    height: auto;
11    margin: 0 auto;
12    background: #FFFFFF 0% 0% no-repeat padding-box;
13    box-shadow: 0px 3px 6px #00000029;
14    border-radius: 30px;
15    opacity: 1;
16    list-style: none outside;
17    padding-top: 39px;
18    padding-bottom: 46px;
19    padding-left: 0;
20    width: 95%;
21}
22
23h5 {
24    font-size: 24px;
25    background: linear-gradient(transparent 70%, #99E5A5 70%);
26    max-width: 96px;
27    margin: 82px auto 70px;
28    line-height: 38px;
29
30}
31
32.news-container-list {
33    max-width: 1048px;
34    margin: 0 auto;
35    width: 90%;
36}
37
38.news-container .news-container-list a {
39    border-bottom: 2px solid #E7E7E7;
40    display: flex;
41    align-items: center;
42    flex-wrap: nowrap;
43    text-decoration: none;
44    padding: 19.5px 33px 19.5px 0;
45}
46
47time {
48    font-size: 16px;
49    color: #21A937;
50}
51
52.news span {
53    background-color: #444444;
54    width: 80px;
55    height: 25px;
56    line-height: 25px;
57    margin-right: 30px;
58    margin-left: 30px;
59    text-align: center;
60    color: #FFFFFF;
61    font-size: 12px;
62    flex-shrink: 0;
63}
64
65.news-container-list p {
66    font-size: 16px;
67    color: #444444;
68    white-space: nowrap;
69    overflow: hidden;
70    text-overflow: ellipsis;
71
72}
73
74.news-button {
75    text-align: right;
76    max-width: 1121px;
77    padding-top: 39.5px;
78
79}
80
81.news-container-list-button {
82    color: #444444;
83    font-size: 16px;
84    line-height: 38px;
85    max-width: 1048px;
86    margin-right: 7.52px;
87}
88.news-container-list-button-triangle {
89    color: #444444;
90}
91
92
93
94/* モバイル版
95----------------------------------*/
96
97@media (max-width: 1140px) {
98    /* ニュース */
99    .news-button{
100        padding-right: 2%;
101    }
102}
103
104@media (max-width: 860px) {
105
106
107    /* ニュース */
108    
109    .news-container .news-container-list a {
110        flex-direction: column;
111        justify-content: start;
112        flex-wrap: wrap;
113        display: block;
114        
115        text-align: left;
116    }
117   
118
119    .news-container-list p {
120        width: 100%;
121        max-width: 300px;
122        overflow:initial;
123        overflow-wrap: break-word;
124        word-break: break-word;
125        word-break: break-all;
126    
127    }
128    .news-container-list {
129        max-width: 300px;
130    }
131    
132    .news span {
133        display: inline-block;
134    }
135    .news-button{
136        padding-right: 2%;
137    }
138
139
140}

試したこと

1 max-width,width90%を指定しても
折り返しができない。
レスポンシブ対応のみ改行したいのでbrは使いたくない。

2 レスポンシブ対応全てで上の線に合わせたいが、幅によってずれてしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

PCのときにwhite-space: nowrap;をつけているので、Tab・SPのときはwhite-space: normal;にしてやると改行できます。

css
1@media (max-width: 860px) {
2   
3    /* 中略 */
4    .news-container-list p {
5        width: 100%;
6        max-width: 300px;
7        white-space: normal;
8        /* overflow:initial;
9        overflow-wrap: break-word;
10        word-break: break-word;
11        word-break: break-all; */
12    }

「すべてを見る」を右揃えにしました＆いくつか修正しました。

html
1    <li class="news-button">
2      <a class="news-container-list-button" href="#">すべて見る</a>
3      <!-- <a class="news-container-list-button-triangle" href="#">▶︎</a> -->
4    </li>

↑htmlから▶︎削除

css
1/* ニュース */
2
3.news {
4  padding-bottom: 112px;
5  background-color: #F5FCF8;
6}
7
8.news-container {
9  max-width: 1180px;
10  height: auto;
11  margin: 0 auto;
12  background: #FFFFFF 0% 0% no-repeat padding-box;
13  box-shadow: 0px 3px 6px #00000029;
14  border-radius: 30px;
15  opacity: 1;
16  list-style: none outside;
17  padding-top: 39px;
18  padding-bottom: 46px;
19  padding-left: 0;
20  width: 95%;
21}
22
23h5 {
24  font-size: 24px;
25  background: linear-gradient(transparent 70%, #99E5A5 70%);
26  max-width: 96px;
27  margin: 82px auto 70px;
28  line-height: 38px;
29
30}
31
32.news-container-list {
33  max-width: 1048px;
34  margin: 0 auto;
35  width: 90%;
36}
37
38.news-container .news-container-list a {
39  border-bottom: 2px solid #E7E7E7;
40  display: flex;
41  align-items: center;
42  flex-wrap: nowrap;
43  text-decoration: none;
44  /* padding: 19.5px 33px 19.5px 0; */
45  padding: 19.5px 0;
46}
47
48time {
49  font-size: 16px;
50  color: #21A937;
51}
52
53.news span {
54  background-color: #444444;
55  width: 80px;
56  height: 25px;
57  line-height: 25px;
58  margin-right: 30px;
59  margin-left: 30px;
60  text-align: center;
61  color: #FFFFFF;
62  font-size: 12px;
63  flex-shrink: 0;
64}
65
66.news-container-list p {
67  font-size: 16px;
68  color: #444444;
69  white-space: nowrap;
70  overflow: hidden;
71  text-overflow: ellipsis;
72
73}
74
75.news-button {
76  width: 90%; /* 追加 */
77  margin: 0 auto; /* 追加 */
78  text-align: right;
79  max-width: 1121px;
80  padding-top: 39.5px;
81
82}
83
84.news-container-list-button {
85  position: relative; /* 追加 */
86  color: #444444;
87  font-size: 16px;
88  line-height: 38px;
89  max-width: 1048px;
90}
91
92/* 追加 */
93.news-container-list-button::before {
94  content: "▶︎";
95  position: absolute;
96  right: -1.2em;
97}
98
99/* .news-container-list-button-triangle {
100  color: #444444;
101} */
102
103
104
105/* モバイル版
106----------------------------------*/
107
108@media (max-width: 1140px) {
109
110  /* ニュース */
111  .news-button {
112    /* padding-right: 2%; */
113  }
114}
115
116@media (max-width: 860px) {
117
118
119  /* ニュース */
120
121  .news-container .news-container-list a {
122    flex-direction: column;
123    justify-content: start;
124    flex-wrap: wrap;
125    display: block;
126
127    text-align: left;
128  }
129
130
131  .news-container-list p {
132    width: 100%;
133    /* max-width: 300px; */
134    white-space: normal;
135    /* overflow:initial;
136        overflow-wrap: break-word;
137        word-break: break-word;
138        word-break: break-all; */
139  }
140
141  .news-container-list {
142    /* max-width: 300px; */
143  }
144
145  .news span {
146    display: inline-block;
147  }
148
149  .news-button {
150    /* padding-right: 2%; */
151  }
152
153
154}