我想将一个长文本折叠成一行并在右侧显示一个MORE 链接。展开的文本应在底部和右侧显示一个 LESS 链接。一些例子可以清楚地说明:
text text text MORE
text text text text
text LESS
折叠状态似乎与 position: relative; 配合得很好； float: right, 但是不知道怎么实现展开状态。没有什么比 float: right-bottom (实际上什至模拟 float: bottom 需要一个 complicated hack ，但这个 hack 在我的情况下似乎不可用)。该算法很简单:如果文本后有足够的空间，则将其放在最后一行的末尾，否则，将其放在下一行(也是右对齐)，但是如何告诉浏览器？
更多示例，它应该如何工作。
text MORE
text a_long_word
text text text LESS
text a_long_word
an_even_longer_word
LESS
请注意，text MORE 行应生成为以下行的缩短版本。
我有点让它和类似的东西一起工作
<div><a>MORE</a><span>the text....</span><a>LESS</a></div>
隐藏其中一个链接，并设置overflow: hidden; height: 20px; 在折叠的情况下。现在，我也想获得 text-overflow: ellipsis...
我不是在寻找纯 CSS 解决方案。我知道扩展文本的高度，如果我也知道它水平结束的位置，我会绝对定位 MORE 并结束它。
最佳答案
使用 CSS 看起来真的很简单，除非我遗漏了什么。那这个呢？ http://codepen.io/pageaffairs/pen/AwfoI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {width: 20%; margin: 30px; background: #f7f7f7; overflow: hidden;}
b {float: right;}
</style>
</head>
<body>
<div>
<span>text</span> <b>MORE</b>
</div>
<div>
<span>text a_long_word text text text</span> <b>LESS</b>
</div>
<div>
<span>text a_long_word an_even_longer_word</span> <b>LESS</b>
</div>
</body>
</html>
关于html - 将折叠文本切换为单行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24297916/