テキスト量が増えた時や、画面サイズが小さくなった時にデザイン崩れをなくすには？

ダミーテキスト（ニュース）の量が増えるとデザインが崩れてしまいます。（下段に落ちたのち折り返して表示される。）
画面サイズを小さくしたり、テキストの文字量が増えてもデザインが崩れないようにするにはどうすればいいでしょうか？

通常はラベルの横にダミーテキスト（ニュース）がくるのですが、テキストの量が多くなったり、画面サイズが小さくなると上から3段目のようにラベルの下にテキストが落ちてしまいます。

画面サイズをもっと小さくしていくとテキストが折り返して表示されるのですが、ラベルの下で折り返すのではなくラベルと同じ高さの状態でテキストを折り返すにはどのようにすればいいでしょか？

以下は現在のコードです。

html
1<section class="news">
2      <div class="news-container">
3        <p class="news-h">News</p>
4        <div class="news-border"></div>
5        <div class="article-cover">
6
7          <div class="article-container">
8            <p class="date">2019-01-30</p>
9            <a class="la1" href="">ラベル1</a>
10            <a class="article" href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a>
11          </div>
12
13          <div class="article-container">
14            <p class="date">2019-01-30</p>
15            <a class="la2" href="">ラベル2</a>
16            <a class="article" href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a>
17          </div>
18
19          <div class="article-container">
20            <p class="date">2019-01-30</p>
21            <a class="la3" href="">ラベル3</a>
22            <a class="article" href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a>
23          </div>
24
25          <div class="article-container">
26            <p class="date">2019-01-30</p>
27            <a class="la1" href="">ラベル1</a>
28            <a class="article" href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</a>
29          </div>
30
31          <div class="article-container">
32            <p class="date">2019-01-30</p>
33            <a class="la1" href="">ラベル1</a>
34            <a class="article" href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</a>
35          </div>
36
37        </div>
38      </div>
39    </section>
40

sass
1@mixin label($label-color){
2    color: #fff;
3    font-family: "Yu Gothic";
4    font-weight: bold;
5    border-radius: 6px;
6    background-color: $label-color; 
7    padding: 3px 21px;  
8    &:hover{
9        color: #fff;
10        text-decoration: none;
11    } 
12}
13
14.news-container{
15    padding-top: 68px;
16    max-width: 838px;
17    margin:0 auto;
18}
19
20.news-h{
21    font-size: 60px;
22    font-weight: bold;
23    font-family:"Yu Gothic";
24    text-align: center;
25}
26
27.news-border{
28    @include bd;
29    position: relative;
30    top:34.5;  
31    left:50%;
32    transform: translatex(-50%);
33}
34
35.article-container{
36    border-bottom: 1px solid #707070;
37    margin-top: 91px;
38
39    p{
40        display: inline-block;
41    }
42
43    a{
44        display: inline-block;
45    }
46}
47
48
49.date{
50    padding: 4px 30px 21.5px 7.5px;
51}
52
53.article{
54    padding: 4px 0px 21.5px 30px;
55}
56
57.la1{
58    @include label($la1);
59}
60
61.la2{
62    @include label($la2);
63}
64
65.la3{
66    @include label($la3);
67}

flexを試してみた結果です。

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

回答2件

ベストアンサー

display: flex; を使用すれば、タイトルが長くなっても、日付・ラベル・タイトルを横並びで表示することが可能かと思います。
説明を単純にするために説明に不要な部分は省いています。

flex - CSS: カスケーディングスタイルシート | MDN

css
1.article-container {
2  display: flex;
3}
4
5.date {
6  white-space: nowrap;
7}
8
9.la1 {
10  white-space: nowrap;
11}
12

ただし、スマートフォンなどの極端に横幅が狭い端末では
タイトルの改行が多すぎて読みづらくなるので
メディアクエリを使用して、タイトルを日付・ラベルの下に来るように
レイアウトを調整したほうが良いかと思います。

投稿2019/06/30 15:23

編集2019/06/30 15:28

syuus

総合スコア403

knight1220

2019/07/01 00:33

syuusさん回答ありがとうございます。返信が遅くなって申し訳ございません。回答いただいた方法を試してみたのですが今度はラベルが下の段に下がってしまいました。横幅、要素同士の間隔はこの広さが指定されており変更できないのですが、その場合横に並べることはできないでしょうか？ ※質問に回答していただいた方法を試した結果の画像を追加しました。

knight1220

2019/07/01 00:47

すみません。色々試しているうちに元のコードとすこし変わっていて正しくできていませんでした。元のコードで試してみたところ下段に落ちることはなくなったのですが、ラベルが太く（高さ方向に）なってしまいます。（テキストが改行されるごとにどんどん太くなっていく）太くなるのを回避する方法はあるでしょうか？ ※質問に画像を追加しました。

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