如果没有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",因为Baron的全名太长而不适合.

如何使用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>

这不是一个非常漂亮的解决方案,但嘿,这是一些东西.:)

Answer 2

我通过使用overflow:hidden和浮动做了类似的事情divs.

<div style="overflow:hidden;height:1.2em;">
  <div style="float:left">Rudolph</div>
  <div style="float:right">Raspe</div>
  Erich
</div>

所以,在一个小街区,你会得到Rudolph Raspe,在一个大的鲁道夫埃里希拉斯佩.

显然,它不是非常普遍,但在某些特定情况下可以使用它.