我正在嘗試實作以下布局：具有多列固定寬度的網格，其中一列具有未知寬度的內容，它將由多個span元素組成，不會換行，并且必須用省略號截斷。
一個更具體的例子：
這是我嘗試使用 flexbox 失敗的方法：
.grid {
width: 300px;
border: 1px solid black;
display: grid;
grid-template-columns: [main] minmax(0, 1fr) [foo] 20px [bar] 20px
}
main {
grid-column: main;
white-space: nowrap;
background: yellow;
}
.color-marker {
height: 10px;
width: 10px;
background: red;
border-radius: 50%;
}
.test {
display: flex;
align-items: baseline;
gap: 0.6rem;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.test > * {
flex: 0 0 auto;
}
.foo {
grid-column: foo;
height: 20px;
width: 20px;
background-color: orange;
}
.bar {
grid-column: bar;
height: 20px;
width: 20px;
background-color: purple;
}<div class="grid">
<main>
<div class="test">
<div class="color-marker"></div>
<span>
Lorem ipsum
</span>
<span>
sed do eiusmod tempor incididunt ut labore
</span>
</div>
</main>
<div class="foo">
</div>
<div class="bar">
</div>
</div>jsbin 上的相同示例
我還嘗試使用行內網格而不是 flexbox，這也無濟于事（例如 jsbin）。
有沒有辦法使這項作業？
免責宣告：我意識到 Stack Overflow 上已經詢問了這個問題的變體；但沒有一個建議的解決方案對我有用。以下是我檢查過的執行緒：
- Flexbox 中的 Flexbox 無法處理省略號文本溢位
- 文本溢位省略號在嵌套的 flexbox 中不起作用
- flex child 上的文本溢位省略號不起作用
我希望這不會使我的問題重復。
uj5u.com熱心網友回復：
首先，看看這是否滿足您的需求。省略號在兩個<span>s 上。請參閱代碼注釋以了解所做的更改。
.grid {
width: 300px;
border: 1px solid black;
display: grid;
grid-template-columns: [main] minmax(0, 1fr) [foo] 20px [bar] 20px
}
main {
grid-column: main;
white-space: nowrap;
background: yellow;
}
.color-marker {
height: 10px;
width: 10px;
background: red;
border-radius: 50%;
align-self: center; /*<------------ added */
flex: 1 0 auto; /*<------------ added */
}
.test {
display: flex;
justify-content: center; /*<------------ changed */
}
/* .test > * { <------------ removed
flex: 0 0 auto;
} */
span { /*<------------ added */
overflow: hidden; /*<------------ added */
white-space: nowrap; /*<------------ added */
text-overflow: ellipsis; /*<------------ added */
}
.foo {
grid-column: foo;
height: 20px;
width: 20px;
background-color: orange;
}
.bar {
grid-column: bar;
height: 20px;
width: 20px;
background-color: purple;
}<div class="grid">
<main>
<div class="test">
<div class="color-marker"></div>
<span>
Lorem ipsum
</span>
<span>
sed do eiusmod tempor incididunt ut labore
</span>
</div>
</main>
<div class="foo">
</div>
<div class="bar">
</div>
</div>uj5u.com熱心網友回復：
我提供一些例子：
.grid {
width: 300px;
border: 1px solid black;
display: inline-grid;
grid-template-columns: [main] minmax(0, 1fr) [foo] 20px [bar] 20px;
overflow: hidden;
}
main {
grid-column: main;
white-space: nowrap;
background: yellow;
}
.color-marker {
height: 10px;
width: 10px;
background: red;
border-radius: 50%;
}
.foo {
grid-column: foo;
height: 20px;
width: 20px;
background-color: orange;
}
.bar {
grid-column: bar;
height: 20px;
width: 20px;
background-color: purple;
}
.test {
display: flex;
align-items: baseline;
gap: 0.2rem;
}
.l {
width: 10%;
flex-shrink: 1;
display: flex;
}
.m-content {
text-align: center;
}
.color-marker {
height: 10px;
width: 10px;
background: red;
border-radius: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="grid">
<main>
<div class="test">
<div class="l">
<div class="color-marker"></div>
</div>
<div class="m">
<div class="m-content">
<span>
Lorem ipsum
</span>
<span>
sed do eiusmod tempor incididunt ut labore
</span></div>
</div>
</div>
</main>
<div class="foo">
</div>
<div class="bar">
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/345043.html
下一篇：無法在forLoop內分配值