CSS 在容器中有 2 個元素：圖像和文本，如果兩者都沒有足夠的空間，請始終在文本之后顯示圖像並剪切文本（帶省略號）

Question

我有一個容器（有寬度和高度限制），里面有 2 個元素：文本和信息工具提示圖標，我需要始終在文本之后顯示信息圖標並內聯- 這意味着我為文本定義了最大寬度以確保圖標始終與文本在同一行結束。 如果文本更長-我必須用省略號將其剪切。 容器最多可以包含兩行。

我正在使用 React，因此不能將文本用作::before 作為信息圖標，因為內容會有所不同，並且在反應中無法在代碼中插入偽元素:(

我想我需要純 CSS 解決方案 - 到目前為止沒有運氣嘗試......

一些用於說明的 UC：

Answer 1

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4 col-lg-3"> <div class="d-flex justify-content-between align-items-end"> <div class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div clss="" style="padding-left:10px;"> <img src="https://img.icons8.com/pastel-glyph/2x/info.png" class="" style="height: 30px; width:30px"> </div> </div> </div> </div> </div>

使用 Flex Bootstrap CSS 代碼，您可以盡可能地構建。

Answer 2

嘗試將text class （限制文本行）添加到 Pinkal Patel 答案：

 .text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4 col-lg-3"> <div class="d-flex justify-content-between align-items-end"> <div class="text-justify text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div clss="" style="padding-left:10px;"> <img src="https://img.icons8.com/pastel-glyph/2x/info.png" class="" style="height: 30px; width:30px"> </div> </div> </div> </div> </div>