html - 如果没有 JavaScript，我可以在更长的文本放不下时显示不同的文本吗？

Question

我想做什么

我有一个大小受限的框，它应该包含一些文本:

.box {
  width: 100px;
  height: 40px;
  background-color: yellow;
}

<div class="box">
  Some text goes here.
</div>

但是，如果文本变得太长而无法放入框中，我想用我提前准备好的不同的、较短的版本替换该文本。

例如，如果我想用这两个名称填充两个框:

Short version      Long version
------------------------------------------------------------
Rudolf E. Raspe    Rudolf Erich Raspe
Baron Munchausen   Hieronymus Karl Friedrich von Munchhausen

然后第一个盒子将包含“Rudolf Erich Raspe”，因为它足够短，可以放入其中，但第二个盒子将包含“Baron Munchausen”，因为男爵的全名太长而不适合。

如何仅使用 HTML5 和 CSS3 设置这样的框？浏览器兼容性很重要，但我不需要适应非常旧的版本或 11 之前的 Internet Explorer。

备选方案

我可以选择任何标准选项来处理太长的文本 - 让它溢出，或通过 overflow: hidden 剪切它，或添加滚动条，或添加省略号，或任何其他标准溶液。但是因为我已经有了每个可能文本的简短版本，所以我想改用它们。

我可以在 JavaScript 中执行此操作，例如，使用包装器并将其大小与框的大小进行比较。但如果可能的话，我想要一个非 JavaScript 解决方案。

我尝试过的

到目前为止，我考虑过如果文本太长(空白和自动换行的某种组合？)，让文本以某种方式将其自身向下推，使容器溢出:隐藏以在它向下时隐藏它，并放置它后面的文本的简短版本，但我无法让它工作，同时仍然允许文本占据多于一行。

另一种方法是将带有短文本的元素放在带有长文本的元素的正下方，并使用一些转换使短元素在被向下推太多时接管......但我无法理解要么工作。

那么...还有其他想法吗？

Answer 1

有一种方法……有点……

.box {
  width: 100px;
  height: 18px;
  background-color: yellow;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

span {  position: absolute; bottom: 0; left: 0; width: 100%; max-height: 36px;  }
em { position: absolute; width: 100%; top: 18px; left: 0; background-color: yellow; }

<div class="box">
   <span> 
     This text fits
     <em>fallback text</em>
   </span>
</div>

<div class="box">
   <span> 
     Huge text that doesn't fit and it's more than 3 lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     <em>fallback text</em>
   </span>
</div>

<div class="box">
   <span> 
     This text doesn't fit
     <em>fallback text</em>
   </span>
</div>

这不是一个非常漂亮的解决方案，但嘿，它确实是个好东西。 :)