如果没有JavaScript，当长一个不合适时，我可以显示不同的文字吗？
我正在尝试做什么
我有一个大小有限的框，应该包含一些文本：
.box { width: 100px; height: 40px; background-color: yellow; } <div class="box"> Some text goes here. </div>
但是，如果文本太长而无法放入文本框中，我想用我预先准备的另一个更短的文本replace文本。
例如，如果我想用这两个名字填充两个框：
Short version Long version ------------------------------------------------------------ Rudolf E. Raspe Rudolf Erich Raspe Baron Munchausen Hieronymus Karl Friedrich von Munchhausen
那么第一个盒子里面会包含“鲁道夫·埃里克·拉斯佩”（Rudolf Erich Raspe），因为里面的尺寸足够短，而第二个盒子里会包含“男爵男爵”（Baron Munchausen），因为男爵的全名太长了。
我怎样才能build立这样一个盒子，只使用HTML5和CSS3？ 浏览器的兼容性很重要，但是我并不需要适应11之前的旧版本或Internet Explorer。
备择scheme
我可以select任何标准选项来处理太长的文本 – 让它溢出，或通过overflow: hidden ，或添加滚动条，或添加省略号，或任何其他标准解决scheme。 但是因为我已经有了每个可能的文本的短版本，所以我想用这些。
例如，我可以通过使用包装器并将其大小与盒子的大小进行比较来在JavaScript中执行此操作。 但是如果可能的话，我想要一个非JavaScript的解决scheme。
我试过了
到目前为止，我认为如果文本太长（某些空白和单词换行的组合），文本会以某种方式压低自己的内容，导致容器溢出：隐藏时会隐藏容器，并放置短版它背后的文字，但我不能让它工作，同时仍然允许文本占据多行。
另一种方法是在短元素下方放置一个短文本元素，并使用一些变换，使得这个短元素在被压下太多时会被接pipe。但是我也无法让它工作。
那么…还有其他的想法吗？
有一种方法…还挺…
.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>
我已经做了类似的使用overflow:hidden和浮动的divs 。
<div style="overflow:hidden;height:1.2em;"> <div style="float:left">Rudolph</div> <div style="float:right">Raspe</div> Erich </div>
我在单线解决scheme上玩得很开心，我意识到多线解决scheme可能更适合OP。 我只是坚持在这里，以防万一它对任何人有用。 我对Firefox，Chrome，IE和Edge的最新版本进行了一次快速testing，似乎在任何地方都能正常工作。 我已经在示例中添加了一些固定宽度的框，但实际上它的dynamic框宽度也是如此。
div { position: relative; overflow: hidden; line-height: 1.2em; height: 1.2em; /* extraneous CSS added for sample clarity only */ font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif; font-size: 13px; margin: 3px; } div > span { background-color: #EFF0F1; float: left; } div::before { content: "\00a0"; } div::after { content: attr(title); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: #EFF0F1; }
<div title="Rudolf E. Raspe"> <span>Rudolf Erich Raspe</span> </div> <div title="Baron Munchausen"> <span>Hieronymus Karl Friedrich von Munchhausen</span> </div> <div title="Rudolf E. Raspe" style="width:400px;"> <span>Rudolf Erich Raspe</span> </div> <div title="Baron Munchausen" style="width:400px;"> <span>Hieronymus Karl Friedrich von Munchhausen</span> </div> <div title="Rudolf E. Raspe" style="width:200px;"> <span>Rudolf Erich Raspe</span> </div> <div title="Baron Munchausen" style="width:200px;"> <span>Hieronymus Karl Friedrich von Munchhausen</span> </div> <div title="Rudolf E. Raspe" style="width:120px;"> <span>Rudolf Erich Raspe</span> </div> <div title="Baron Munchausen" style="width:120px;"> <span>Hieronymus Karl Friedrich von Munchhausen</span> </div>
纯CSS解决scheme：
使用：
<div class="box" data-shortname="Baron Munchausen"> Hieronymus Karl Friedrich von Munchhausen </div>
多年来，我试图做一些使用box::after和z-index ：
box { position: relative; display: block; width: 120px; height: 40px; background-color: yellow; overflow: hidden; z-index: 0; } box::after { content: attr(data-shortname); position: absolute; display: block; top: 0; left: 0; background-color: yellow; z-index: 1; }
我空手而归 – 虽然你可以使用上面的设置@media query应用一个正面或负面的z-index box::after 。
（如果box::after z-index是正数，则显示短名称，否则显示长名称。）
JavaScript解决scheme：
所以这里是一个基于JavaScript的解决scheme，毕竟使用data-*
var boxes = document.getElementsByClassName('box'); for (var i = 0; i < boxes.length; i++) { if (boxes[i].textContent.length > 20) { boxes[i].textContent = boxes[i].dataset.shortname; } }
.box { position: relative; width: 120px; height: 40px; background-color: yellow; margin-bottom: 12px; }
<div class="box" data-shortname="Rudolf E. Raspe"> Rudolf Erich Raspe </div> <div class="box" data-shortname="Baron Munchausen"> Hieronymus Karl Friedrich von Munchhausen </div>
我知道这不是一个真正的答案，而是一个替代scheme。 有什么理由你不能使用文本溢出？
.box span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
有用的链接：
实际上，如果大小和模式是不变的，那么可以做很多方法…但是在你的例子中，在这两种情况下，短文本甚至不是长文本的一部分，它是一个不同的string完全在第二个例子中，这就限制了你在显示/隐藏/重叠方面的select
如果您可以确定一个一致的屏幕大小，在这个大小上，您将从短到长交换，您可以使用data-属性和CSS content以及@media查询。
考虑到variables，我会build议使用类似下面的例子来将所有的项目在适中的断点处改为短版本，然后使用像添加省略号这样的方法来处理任何更长的值， 。
<div class="box"> <p class="text-container" data-short-version="Rudolf E. Raspe" data-long-version="Rudolf Erich Raspe"></p> <p class="text-container" data-short-version="Baron Munchausen" data-long-version="Hieronymus Karl Friedrich von Munchhausen"></p> </div> .text-container:before { content:attr(data-short-version);} .text-container { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:40px; margin:0px;} @media screen and (min-width:600px) { .text-container:before { content:attr(data-long-version); } }
例如： http : //codepen.io/ryantdecker/pen/wWPJNA
