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

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%。

如果解决方案对用户名进行硬性限制就很好长用户名和短标题有点傻。

我已经为用户名类尝试了 min-width 但如果用户名很短，则斜杠前有很多空格，我不希望这样。

i      / loveyou

我也尝试过 max-width 50-50，但是用户名短，标题长，标题不会像我希望的那样填满 flex 容器宽度的剩余空间

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

在任何情况下，当两个元素的宽度之和超过容器的最大可用宽度时，理想的解决方案应该设法使元素与最大宽度的比例保持在 40-60 左右，但显示完整宽度否则两个元素中的文本

编辑:感谢@robbieAreBest 的回答，并发现将 width: fit-content 添加到 .username 类由于某种原因不起作用(事实上对类的宽度完全没有影响)。通过这个，我发现用户名部分在容器中所占的百分比宽度与其长度成正比，只有当用户名的长度与标题的长度大致相同或更长时，50/50 的比例才成立(例如 https://jsfiddle.net/pys25tfa/ )。有谁知道为什么会发生这种情况或如何解决？将不胜感激。

编辑 2 + existing solution I'm willing to make do with : 已经找到解决方案，但每个解决方案都有改进的余地。目前的解决方案只考虑了我提到的 4 种基本情况，并且将用户名限制在总宽度的 40% 左右，即使标题很短。如果我错过了任何可能的组合，如果有人设法找到我的代码中断的情况，或者如果有人设法找到更好的解决方案来更好地处理长用户名/短标题大小写，请告诉我。

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

Answer 1

我会将 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;
}

这应该让用户名缩小并为您的 .title span 提供更多空间，同时在需要时占用一半的可用区域。

---

评论后编辑

如果以上没有给你你想要的结果，你可能想尝试使用网格显示:

html:

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

CSS:

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

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

.wrap {
  display: grid;
  width: 150px;
  grid-template-columns: auto minmax(20%,100%);
}

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