Question

我想将长文本折叠为一行，并在右侧显示MORE链接。展开的文字应在底部和右侧显示LESS链接。一些例子可以说清楚：

text text text MORE

text text text text
text           LESS

崩溃状态似乎与position: relative; float: right一致，但我不知道如何实现扩展状态。没有什么比float: right-bottom更像（实际上甚至模拟float: bottom需要一个complicated 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并称之为一天。

Answer 1

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>

将折叠文本切换为单行

1 个答案: