CSS 在容器中有 2 个元素：图像和文本，如果两者都没有足够的空间，请始终在文本之后显示图像并剪切文本（带省略号）
[英]CSS having 2 elements in container: image and text, always display the image after text and cut the text (with ellipsis) if not enough space for both
问题描述
I have a container (with width and height limitation), which has 2 elements inside it: text and info tooltip icon, I need to always display the info icon after the text and inline with it - meaning I have maximum width defined for the text to ensure the icon will always end in same line with the text.
我有一个容器（有宽度和高度限制），里面有 2 个元素：文本和信息工具提示图标，我需要始终在文本之后显示信息图标并内联- 这意味着我为文本定义了最大宽度以确保图标始终与文本在同一行结束。 if the text is longer- I have to cut it with ellipsis.如果文本更长-我必须用省略号将其剪切。 the container can include up to two lines.容器最多可以包含两行。
I am using React and therefor cant use the text as::before for the info icon as the content varies and in react there is no way to insert pseudo elements in code:(我正在使用 React，因此不能将文本用作::before 作为信息图标，因为内容会有所不同，并且在反应中无法在代码中插入伪元素:(
I guess I need pure CSS solution - tried with no luck so far...我想我需要纯 CSS 解决方案 - 到目前为止没有运气尝试......
Some UCs for illustration:一些用于说明的 UC：
2 个解决方案
解决方案1
0 2020-12-03 16:51:29
<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>
Using Flex Bootstrap CSS code you can build as you can.使用 Flex Bootstrap CSS 代码，您可以尽可能地构建。
解决方案2
0 已采纳 2021-03-22 08:29:31
try add text class (that limit text lines) to Pinkal Patel answer:尝试将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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.