TL:DR - 我有一組跨度在容器 div 中反向包裝，我需要一個“邊界線”，它是僅底部跨度組的寬度。（解決方案可以使用css、html、js任意組合）
為了提供一些背景資訊，我使用了這些由一些 JS 制作的跨度框，因此我可以進行反向包裝并首先填充底線。
有問題的JS：
x = document.getElementsByClassName("ipsumNumber");
for (i = 0; i < x.length; i ) {
const wrapText = x[i];
wrapText.innerHTML = wrapText.textContent
.split(" ")
.map(function (y) {
return "<span>" y "</span>";
})
.reverse()
.join("");
}
我想要一個底部欄，它比跨度的底線寬任意數量的像素。我目前的策略是@media在 css 檔案中使用大量的。
像這樣的東西：
.ipsumHolder {
vertical-align: middle;
width: fit-content;
height: fit-content;
display: flex;
padding-left: 0.3em;
position: absolute;
}
.ipsum::after {
content: "";
position: absolute;
margin-bottom: -5.5px;
margin-right: 0.3em;
padding-left: 0.3em;
padding-right: 0.3em;
border-bottom: 10px solid blue;
width: 80%;
color: transparent;
bottom: 0;
}
p.ipsumNumber{
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
justify-content: center;
}
@media (max-width: 852px) {
#ipsum::after {
line-height: 2em;
content: "Neque porro quisquam";
}
}
@media (max-width: 666px) {
#ipsum::after {
line-height: 2em;
content: "Neque porro quisquam est qui dolorem";
}
}
@media (max-width: 600px) {
#ipsum::after {
line-height: 1em;
content: "quisquam est qui dolorem";
}
}
@media (max-width: 428px) {
#ipsum::after {
line-height: 3em;
content: "qui dolorem";
}
}
完美契合：
非完美擬合（最后一行是最大的）：
跨度框：
<div class="ipsumHolder">
<p id="ipsum" class="ipsumNumber">
<span>ipsum</span><span>dolorem</span><span>qui</span><span>est</span><span>quisquam</span><span>porro</span><span>Neque</span>
</p>
</div>
這太可怕和惡心了??（更不用說每頁大約有 4 個這樣的文本框，我必須為 4 個不同的檔案這樣做）！
I know there must be a better way to this, but i just can't think of it. I have not found a way to do "width: 100%;" and only fill for the bottom row.
uj5u.com熱心網友回復：
這是一個僅限 CSS 的 hacky 解決方案。調整容器大小以注意回應性
.ipsumNumber {
display: flex;
justify-content: center;
flex-wrap: wrap-reverse;
font-size: 25px;
font-weight: bold;
color: #fff;
gap: 5px; /* the gap */
}
.ipsumHolder {
width: 300px;
overflow: hidden; /* we need to hide the overflow */
resize: horizontal;
background: #000; /* main background */
}
.ipsumNumber span {
position: relative;
}
.ipsumNumber span:before,
.ipsumNumber span:after{
content: "";
position: absolute;
height: 5px;
}
/* your underline */
.ipsumNumber span:before {
inset: 100% -5px auto; /* 5px same as gap, you can use bigger if you want but not smaller */
background: blue;
}
/* the hack that will hide the non-needed unreline */
.ipsumNumber span:after {
inset: auto -200vmax 100%; /* 200vmax is a very big value */
background: #000; /* same as main background */
z-index: 1;
}<div class="ipsumHolder">
<p id="ipsum" class="ipsumNumber">
<span>ipsum</span><span>dolorem</span><span>qui</span><span>est</span><span>quisquam</span><span>porro</span><span>Neque</span>
</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395240.html
標籤：javascript html jquery css