使用绝对位置的顶部底部跨度在换行时无法正常工作

问题描述

我有一个 div，该 div 包含一个跨度列表，每个跨度包含 2 个跨度：顶部和底部。

<div>
    <span class="text">
        <span class="top">Top 1</span>
        <span class="bottom">This is Bottom 1</span>
    </span>
    <span class="text">
        <span class="top">This is very very very very very very long Top 2</span>
        <span class="bottom">This is Bottom 2</span>
    </span>
    <span class="text">
        <span class="top">Top 3</span>
        <span class="bottom">This is Bottom 3</span>
    </span>
    <span class="text">
        <span class="top">Top 4</span>
        <span class="bottom">This is Bottom 4</span>
    </span>
    <span class="text">
        <span class="top">Top 5</span>
        <span class="bottom">This is Bottom 5</span>
    </span>
    <span class="text">
        <span class="top">Top 6</span>
        <span class="bottom">This is Bottom 6</span>
    </span>
    <span class="text">
        <span class="top">Top 7</span>
        <span class="bottom">This is Bottom 7</span>
    </span>
</div>

我想把上跨设置在下跨之上，如果上跨长度大于下跨，就会被隐藏，像这样

它适用于普通的相对和绝对 css：

.text{
  position: relative;
}
.top{
    font-size: 7px;
    position: absolute;
    font-weight: 600;
    white-space: Nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    top: -3px;
}

但是当断线时，顶部跨度在那一点丢失

我尝试将 display: inline-block 添加到 .text 但行没有正确断开（它正在断开整个底部的行，我不希望那样，我希望该行可以在任何地方断开，例如 这是，或这是底部)

这是 jsfiddle 链接以获取更多详细信息https://jsfiddle.net/6qyd397a/3/

---

15/4 从 Atomkind 更新：

在 .top 跨度内添加跨度将是一个选项，现在始终显示 .top 跨度，但仍有一种情况下跨度的第一个字母在第二行，但顶部跨度仍在第一行线

解决方法

我了解您想要什么以及问题是什么，但我尝试了不同的方法，例如 add box-sizing: border-box; 并且我还使用了 display: flex;，但似乎没有一个很好的解决方案。

由于 display: inline; 和可能的换行符，这里有一个问题：如果在写第一个字母之前换行，则 top: -3px 位置在上面的行中并且无法显示，因为overflow: hidden;。

但是为什么呢？好吧，您的 HTML 元素之间有空格（和换行符）！详细来说，<div class="text">（带position: relative;）和<div class="top">之间的空格。还有 .top 和 <div class="bottom"> 的结束标签之间的空格！

只需删除 HTML 代码中的这些空白和换行符即可。 通过这种方式，您可以确保用于定位的 .top 元素起点与 .bottom 的第一个内容完全相同，而不是之前，可能在另一行。 我建议使用 box-sizing: border-box; ;-)

* {
  box-sizing: border-box;
}
.text{
  position: relative;
}
.top{
    font-size: 7px;
    position: absolute;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    top: -3px;
}

<br /><br /><br />
<div>
    <span class="text"><span class="top">Top 1</span><span class="bottom">This is Bottom 1</span></span>
    <span class="text"><span class="top">This is very very very very very very long Top 2</span><span class="bottom">This is Bottom 2</span></span>
    <span class="text"><span class="top">Top 3</span><span class="bottom">This is Bottom 3</span></span>
    <span class="text"><span class="top">Top 4</span><span class="bottom">This is Bottom 4.</span></span>
  <span class="text"><span class="top">Top 5</span><span class="bottom">This is Bottom 5</span></span>
  <span class="text"><span class="top">Top 6</span><span class="bottom">This is Bottom 6</span></span>
    <span class="text"><span class="top">Top 7</span><span class="bottom">This is Bottom 7</span></span>
  
</div>

https://jsfiddle.net/8fsn9mzd/

更新 2021-04-15： 另一种方法是在 .top 元素内添加一个新元素： https://jsfiddle.net/xdqzab6p/ 在那里总是显示 TOP，但在 1 种情况下以一种奇怪的方式显示：

* {
  box-sizing: border-box;
}
.text{
  position: relative;
  margin-right: 5px;
  background: lightblue;
}
.top{
  font-size: 7px;
  position: absolute;
  font-weight: 600;
  white-space: nowrap;
  top: -3px;
  right: 0;
  width: calc(100% - 5px);
  background: tomato;
}
.ellips{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

<br /><br /><br />
<div>
    <span class="text">
    <span class="top">
      <span class="ellips">Top 1</span>
    </span>
    <span class="bottom">This is Bottom 1</span>
  </span>
    <span class="text">
    <span class="top ellips">This is very very very very very very long Top 2</span>
      <span class="bottom">This is Bottom 2</span>
    </span>
    <span class="text">
    <span class="top">
      <span class="ellips">Top 3</span>
    </span>
    <span class="bottom">This is Bottom 3</span>
  </span>
    <span class="text">
    <span class="top">
      <span class="ellips">Top 4</span>
    </span>
    <span class="bottom">This is Bottom 4.</span>
  </span>
  <span class="text">
    <span class="top">
      <span class="ellips">Top 5</span>
    </span>
    <span class="bottom">This is Bottom 5</span>
  </span>
  <span class="text">
    <span class="top">
      <span class="ellips">Top 6</span>
    </span>
    <span class="bottom">This is Bottom 6</span>
  </span>
  <span class="text">
    <span class="top">
      <span class="ellips">Top 7</span>
    </span>
    <span class="bottom">This is Bottom 7</span>
  </span>
</div>

,

您好，可能使用固定为 .top 的位置

.top{
font-size: 7px;
position: fixed;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
top: 3px;

}

,

似乎当你打破这个词时，顶部没有显示可能的修复方法，如下所示。希望它对你有用：

CSS：

.text {
  position: relative;
}

.top {
  word-break: break-all;
  font-size: 7px;
  position: absolute;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  top: -3px;
}

HTML：

<div>
  <span class="text">
    <span class="top">Top 1</span>
    <span class="bottom">This is Bottom 1</span>
  </span>
  <span class="text">
    <span class="top">This is very very very very very very long Top 2</span>
    <span class="bottom">This is Bottom 2</span>
  </span>
  <span class="text">
    <span class="top">Top 3</span>
    <span class="bottom">This is Bottom 3</span>
  </span>
  <span class="text">
    <span class="top">Top 4</span>
    <span class="bottom">This is Bottom 4</span>
  </span>
  <span class="text">
    <span class="top">Top 5</span>
    <span class="bottom">This is Bottom 5</span>
  </span>
  <span class="text">
    <span class="top">Top 6</span>
    <span class="bottom">This is Bottom 6</span>
  </span>
  <span class="text">
    <span class="top">Top 7</span>
    <span class="bottom">This is Bottom 7</span>
  </span>
</div>

,

好吧，您不能将 version: '3.8' # '3' means '3.0' services: hello-world: build: . # Only if you're planning to `docker-compose push` # image: registry.example.com/name/hello-world-image:${TAG:-latest} ports: - "8080:8080" volumes: # A bind-mount directory to read out log files is a good use of # `volumes:`. This does not require special setup in the Dockerfile. - ./logs_ACM:/root/logs_ACM # Don't enable auto-restart until you've debugged the start sequence # restart: always 分隔到另一行的原因是它被定位为绝对的。但是，即使可以，它也会移动到更小的行，这意味着它无法保持在 .top 的顶部。您需要添加：

.bottom

您还可以添加一个脚本来更新 .bottom{ white-space: nowrap; } ，以便在窗口调整大小或 .top 文本更改并变小或变大时它不会保持更小。

.bottom

答案是解决您的问题太难了，因为没有 CSS 属性来解决。