嘿，我来帮你搞定这个需求！要实现文本超过100px时显示省略号，同时和右侧的金额保持在同一行，我们可以通过调整HTML结构+CSS布局轻松实现，具体步骤如下：

第一步：优化HTML结构（按需调整） #

首先确保文本和金额处于同一个父容器中，这样方便用布局控制它们同行显示。如果你的现有结构没做区分，可以改成这样：

<div class="don_single_donatori">
  <div class="viewport">
    <div class="overview">
      <div class="donation-item">
        <p class="truncated-text">This is my full name which should be shortend</p>
        <span class="amount">2.000,00 EUR</span>
      </div>
    </div>
  </div>
</div>

第二步：编写核心CSS样式 #

接下来用CSS实现文本截断和同行布局，每个属性的作用都给你标注清楚了：

/* 父容器：让文本和金额同行并垂直居中 */
.donation-item {
  display: flex;
  align-items: center; /* 垂直居中对齐元素 */
  gap: 8px; /* 文本和金额之间的间距，可根据需求调整 */
}

/* 文本容器：实现100px宽度截断效果 */
.truncated-text {
  width: 100px; /* 你要求的最大显示宽度 */
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出时自动显示省略号 */
  margin: 0; /* 清除p标签默认的上下外边距，避免布局错乱 */
}

/* 金额容器：固定显示，不被压缩 */
.amount {
  flex-shrink: 0; /* 确保金额不会因为文本长度变化而被压缩变形 */
}

效果说明 #

• 当文本长度超过100px时，会自动截断并显示...，比如你提供的示例文本会变成This is my full name which...
• 文本和金额始终保持在同一行，垂直居中对齐
• 金额部分不会被压缩，始终完整显示

如果你的现有HTML结构中，文本和金额已经在同一个容器里，那只需要给文本容器加上.truncated-text的样式，给父容器加上flex布局即可，不用大改结构~

内容的提问来源于stack exchange，提问作者magasr