gpt4 book ai didi

html - 将折叠文本切换为单行

转载 作者:太空宇宙 更新时间:2023-11-03 18:08:10 24 4
gpt4 key购买 nike

我想将一个长文本折叠成一行并在右侧显示一个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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com