text-overflowがうまく効かない

text-overflowが聞いてはいるのですが、画面幅が小さくなると「…」がついてこなくなります。

どうすれば画面幅いっぱいになった時に文末を「…」(本来のように)にできるのでしょうか？
親要素にmin-widthを付けるなどは試しました！

html
1<body>
2	
3	<section id="center-contents">
4			<div class="wrap">
5				<p class="first-sentence">おすすめ/更新</p>
6				
7				<a href="#" class="bg-white center-content mb-3">
8					<div class="center-contents d-flex p-2">
9						<img src="https://placehold.jp/150x150.png" alt="">
10						<div class="content-sentense">
11							<button class="abc-tag">オリジナル</button>
12							<p>テキストテキスト</p>
13							<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
14							<p>20分12秒</p>
15							<p>配信者：○○○</p>
16						</div>
17					</div>
18				</a>
19			</div>
20	</section>
21
22</body>

css
1#center-contents { padding-top: 3%; background-color: #EDF2F5; overflow: hidden; }
2.wrap { width: 70%; margin: auto; }
3.first-sentence { font-size: 20px; }
4.center-contents img { margin-right: 1%; width: 150px; height: 150px; }
5.center-content { width: calc(50% - 20px); margin-right: 16px; overflow: hidden; }
6.content-sentense { min-width: 0; }
7.content-sentense p { overflow: hidden; white-space: nowrap; width: 300px; text-overflow: ellipsis; float: none; font-size: 15px; margin-bottom: 5px; }

s8_chu

2019/05/17 17:54

質問文の画像のような配置が再現出来る CSS を追記していただけませんか？

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

回答1件

ベストアンサー

content-sentense クラスが付与された要素内の p 要素に対して設定されている width プロパティを max-width プロパティに変更することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

HTML
1<body>
2
3  <section id="center-contents">
4    <div class="wrap">
5      <p class="first-sentence">おすすめ/更新</p>
6
7      <a href="#" class="bg-white center-content mb-3">
8        <div class="center-contents d-flex p-2">
9          <img src="https://placehold.jp/150x150.png" alt="">
10          <div class="content-sentense">
11            <button class="abc-tag">オリジナル</button>
12            <p>テキストテキスト</p>
13            <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
14            <p>20分12秒</p>
15            <p>配信者：○○○</p>
16          </div>
17        </div>
18      </a>
19    </div>
20  </section>
21
22</body>

CSS
1#center-contents {
2  padding-top: 3%;
3  background-color: #edf2f5;
4  overflow: hidden;
5}
6
7.wrap {
8  width: 70%;
9  margin: auto;
10}
11
12.first-sentence {
13  font-size: 20px;
14}
15
16.center-contents img {
17  margin-right: 1%;
18  width: 150px;
19  height: 150px;
20}
21
22.center-content {
23  width: calc(50% - 20px);
24  margin-right: 16px;
25  overflow: hidden;
26}
27
28.content-sentense {
29  min-width: 0;
30}
31
32.content-sentense p {
33  overflow: hidden;
34  white-space: nowrap;
35  max-width: 300px; /* 変更 */
36  text-overflow: ellipsis;
37  float: none;
38  font-size: 15px;
39  margin-bottom: 5px;
40}