html - 给一个 HTML 元素一个静态宽度，所以它不能被缩小

Question

我有两个 p HTML 元素，第二个必须完整显示。如果容器无法处理这两个元素，则任何收缩都必须仅应用于第一个元素。

这两个 HTML 元素是内联的。例如，让我们假设第一个 HTML 元素由 W 表示，第二个是 Y。“| |”代表外容器。

|WWWWWWWWWWWW YYYY|，这里容器可以包含两个HTML元素，所以没有问题

|WWWWWWW... YYYY|，这里容器不能同时包含两个 HTML 元素，因此收缩仅应用于第一个元素。

请注意，第二个元素有背景颜色，因此它的宽度必须与它包含的文本完全匹配。比如你给他25%的宽度，文字只有11%，那么就会多出14%的颜色，这就是不好的设计。

我尝试使用 flex 如下:

• 第一个元素:flex: 1 2 auto; 它比第二个元素收缩得更多。
• 第二个元素:flex: 1 1 auto;正常收缩的地方

但是，这个解决方案失败了。

Answer 1

我相信这就是您要找的:

HTML

<div id="div1">
    <p>ABCDEFGHI</p>
    <p>XYZ</p>
</div>

<div id="div2">
   <p>ABCDEFGHI</p>
   <p>XYZ</p>
</div>

CSS

div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

#div1 {
    width:  100px;
}

#div2 {
    width:  200px;
}

p:nth-child(1){
    width: 65%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

p:nth-child(2){
    width: 25%;
}