CSS 通过水平溢出其父项来强制文本适应特定高度

Question

我有一个相对较长的短语，在移动设备上消耗太多 space。它看起来像这样：

.artificial-phone-viewport {
  width: 320px;
  height: 500px;
  border: 1px solid darkgrey;
}
.container {
  width: 100%;
  height: 100%;
}
.text {
  /* 
   * Don't want to change font-size, because text
   * sometimes maybe shorter and 2.2rem is perfect
   * for phrases that are not as long
   */
  font-size: 2.2rem;
}

<body class="artificial-phone-viewport">
  <div class="container">
    <div class="text">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
    </div>
  </div>
</body>

我想要的是让这个文本最多跨度，比方说，10rem 高度。如果它不能适应 10rem 的高度，它应该水平扩展，也许，溢出它的父级，也许像这样：

.artificial-phone-viewport {
  width: 320px;
  height: 500px;
  border: 1px solid darkgrey;
}
.text {
  font-size: 2.2rem;
  white-space: nowrap;
}

<body class="artificial-phone-viewport">
  <!-- Deleted container to reduce code, it actually
       doesn't matter, because it anyway spans
       100% width and height of its parent -->
  <div class="text">
    Lorem ipsum dolor, sit amet consectetur<br/>
    adipisicing elit. Temporibus saepe illum<br/>
    a magni sequi error fugit dolore neque<br/>
    voluptates in laborum.
  </div>
</body>

P.S。此片段只是我想看到的示例，我不想要这些 <br/> 或 white-space: nowrap 中的任何一个。我还希望文本溢出其父级，因为我可以使用 Javascript 适当地缩放它，但我想它与问题不太相关。

Answer 1

所以我想出了一个方法来用 Javascript，虽然我不太喜欢它。我只是增加元素的宽度，直到高度足够小，像这样

const text = document.querySelector('.text')
const rem = parseFloat(
  getComputedStyle(document.documentElement).fontSize
)

let width = text.clientWidth / rem
while(text.clientWidth > 10*rem) {
  width++
  text.style.width = `${width}rem`
}

.artificial-phone-viewport {
  width: 320px;
  height: 500px;
  border: 1px solid darkgrey;
}
.text {
  font-size: 2.2rem;
}

<body class="artificial-phone-viewport">
  <div class="text">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
  </div>
</body>

它不是很好，但对我有用。如果有人找到了不用 javascript 的方法，我愿意接受其他解决方案

CSS 通过水平溢出其父项来强制文本适应特定高度

CSS force text to fit into a particular height by overflowing its parent horizontally

css

overflow