Question

嗨，所以我正在设计在同一行中同时显示用户名和商品标题的样式，

用户名/标题（类似于github）

我要设置样式，以便如果用户名/标题的全宽小于容器的宽度，则应显示两者的全文，但是如果它们超过了容器的最大宽度并开始溢出，我想他们用省略号保持大约50-50或40-60的比例，就像这样：

long_usern ... / long_ti ...

到目前为止，我已经用最大宽度，最小宽度和百分比弄乱了一点，最后我得到了这种最终状态：

.username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title{
    min-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

https://jsfiddle.net/9csohvpa/4/

但是，当标题过长时，有时会掩盖用户名，使其只有几个点且没有任何意义。

... / super_duper_ultra_long...

有时候，在溢出长标题的其余部分时，它仍然会显示一些用户名，尽管我不太了解它的工作原理，在这种情况下，每个元素的优先级是多少它被允许占用。无论每个元素中的文本有多长，我都希望用户名至少占据宽度的30-40％。

如果解决方案对用户名进行硬性限制（例如，如果用户名较长且标题短而不能填满最大宽度，则不允许宽度超过40％），则

很好有点傻，用户名很长，标题很短。

我为用户名类尝试了最小宽度，但是在用户名较短的情况下，斜杠前有很多空格，我不希望这样。

i      / loveyou

我也尝试过最大宽度50-50，但是使用短用户名和长标题，标题并没有像我想要的那样填充flex容器宽度中的其余空间

i / hateyousomu...         |
                           | <-- maximum available width for container
username / long_title_na...|
                           |
i / hateyousomuch555       | <-- ideal solution

在任何情况下，当两个元素的宽度之和超过容器的最大可用宽度时，理想的解决方案应设法将元素保持在最大宽度的大约40-60的比例，但显示整个宽度在两个元素中都包含文字

编辑：感谢@robbieAreBest的回答，并发现由于某些原因，在{.1}中添加width: fit-content无效。（实际上，它对全班）。通过这一发现，我发现用户名部分在容器中所占的百分比宽度与它的长度成正比，并且只有当用户名的长度与标题的长度大致相同或更长时，50/50的比例才成立。（例如https://jsfiddle.net/pys25tfa/）。有谁知道为什么会这样或如何解决？将不胜感激。

编辑2 + existing solution I'm willing to make do with： 找到了解决方案，但是每个解决方案都有改进的余地。当前的解决方案仅考虑了我提到的4种基本情况，并将用户名限制为总宽度的大约40％（即使标题很短）。如果我错过任何可能的组合，如果有人设法找到我的代码中断的情况，或者有人设法找到更好地解决长用户名/短标题大小写问题的解决方案，请告诉我。

理想的代码（可能是一点点特定的/不必要的）：长标题的长用户名与全宽度组合溢出将限制每个元素的宽度分别为40/60，但是长名称和短标题它不会溢出整个宽度，而是将用户名限制为宽度的60％，从而允许向用户显示更多信息。如果有人设法找到在长用户名和短标题的情况下显示完整用户名的解决方案，也请在下面发布。谢谢大家为我提供的帮助：)非常感谢。

Answer 1

我会将tkinter添加到您的width: fit-content类中

.username

这应该使用户名缩小并为您的.username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: fit-content; } .title{ min-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }提供更多空间，同时在需要时也占用一半的可用区域。

评论后编辑

如果以上方法没有给您带来结果，那么您可能想要尝试使用网格显示代替：

html：

.title span

css：

<div class="wrap">
<span class="username">usern</span>
<span class="title">&nbsp;/ super_duper_long_title</span>
</div>

https://jsfiddle.net/eu2t0fq3/1/

并排溢出2个文本容器的样式

1 个答案: