[英]Placing icon after paragraph text regardless of line length with CSS
I'm attempting to add an icon after the last paragraph text that I am appending using JavaScript.我试图在我使用 JavaScript 附加的最后一段文本之后添加一个图标。 My issue, that the last paragraph text-length varies, and based off how my current styling to get the icon sitting in-line it only works for one specific length.
我的问题是,最后一段文本长度会有所不同,并且根据我当前的样式如何使图标处于内嵌状态,它仅适用于一个特定的长度。 If the paragraph was a few words longer the icon would appear over text for example:
如果段落长几个字,图标会出现在文本上,例如:
How can I style the icon and text in order for it to appear at the end of every paragraph regardless of length?如何设置图标和文本的样式,使其出现在每个段落的末尾,而不管长度如何? At the moment I am using position
absolute
while adjusting the right and top margin positioning.目前我在调整右边距和上边距位置时使用
absolute
位置。
Here are the CSS properties that I am using for this example:以下是我在此示例中使用的 CSS 属性:
.paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
}
.icon-lock {
position: absolute;
right: 54%;
margin-top: -30px;
}
My expected outcome is for the icon to appear at the end of the paragraph regardless of length without overlapping with the text output.我的预期结果是无论长度如何,图标都出现在段落末尾,而不与文本输出重叠。
Instead of positioning the icon absolutely, I would put the text inside a <p>
and put the .icon-lock
in the same level, and then add display: inline
to both the new <p>
and the .icon-lock
.我不会绝对定位图标,而是将文本放在
<p>
,并将.icon-lock
放在同一级别,然后将display: inline
添加到新的<p>
和.icon-lock
。 This way, the icon will always sit right next to the end of the paragraph.这样,图标将始终位于段落末尾的旁边。
Working example: https://jsfiddle.net/nkg1269x/9/工作示例: https : //jsfiddle.net/nkg1269x/9/
.paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
position:relative;
}
.paragraph::after{
content: '\1F516';
position:absolute;
bottom:5px;
padding-left:10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.