TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
如果您希望頂部文本根據(jù)父元素的寬度（已被.second-text-middle內(nèi)部文本擴(kuò)展）擴(kuò)展，您可以使用簡單的 JavaScript。
在這里，我們可以檢查 和 的寬度，#n1并.first-text-middle增加 的font size: n%;，#n1直到它適合父級(jí)。
fitWidth();
window.addEventListener("resize", function() {
fitWidth();
});
function fitWidth() {
let first = document.querySelector('.first-text-middle');
let firstText = document.getElementById('n1');
let textSize = 100; // we will use it like a base 100% font-size later
// set font size to '#n1'
firstText.style.cssText = 'font-size:' + textSize + '%';
while (first.clientWidth - 2 >= firstText.offsetWidth) {
textSize = textSize + 1; //increments font size by 1% each loop
firstText.style.cssText = 'font-size:' + textSize + '%';
// basically in DOM you see only result of the very last loop of this 'while' statment
}
}
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container {
justify-content: center;
display: grid;
grid-template-columns: 10vmin min-content 10vmin;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas: "left middle right ""left first-text-middle right""second-text-left second-text-middle second-text-right";
}
.left {
border: 1px solid red;
grid-area: left;
text-align: right;
}
.right {
border: 1px solid red;
grid-area: right;
}
.middle {
border: 1px solid red;
grid-area: middle;
}
.second-text-left {
border: 1px solid red;
grid-area: second-text-left;
}
.second-text-right {
border: 1px solid red;
grid-area: second-text-right;
}
.first-text-middle {
border: 1px solid red;
text-align: center;
grid-area: first-text-middle;
align-self: stretch;
vertical-align: top;
}
.second-text-middle {
border: 1px solid red;
text-align: center;
grid-area: second-text-middle;
align-self: stretch;
vertical-align: top;
overflow: hidden;
}
<div class="grid-container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="left"></div>
<div class="first-text-middle">
<span id="n1">Lorem</span>
</div>
<div class="second-text-left "></div>
<div class="second-text-middle">
<span id="n3">LoremIps</span>
</div>
<div class="second-text-right"></div>
</div>
舉報(bào)