Html 如果文本较短或字符数有限，则CSS隐藏按钮

我使用下面的CSS代码来显示或隐藏完整的段落。请参考下面的代码片段。工作完美！然而，我们都知道，只有当段落中的文本太长时，才会显示此类“显示更多”按钮。问题是，尽管按钮在这里工作正常，显示或隐藏文本的工作也做得很好，但即使句子太短或文本太有限（比如1行或2行文本，可以轻松阅读，不需要“显示更多”按钮），它仍然会显示。如何隐藏该按钮，并仅当文本足够长以使按钮实际显示时才显示？另外，如果是长句，当实际显示show more按钮时，我希望在句子末尾有3个点（如…），这表示有更多的文本要阅读。这三个点表示当段落展开时消失，当段落缩回时应该回来

附言：我期待一个CSS唯一的答案。请不要使用jQuery或Javascript，因为我想让它简单明了，不想把事情搞砸

.panel包装器{
位置：相对位置；
宽度：500px；
保证金：0自动；
}
.显示，.隐藏{
位置：绝对位置；
底部：-1米；
z指数：100；
文本对齐：居中；
颜色：红色；
}
.隐藏{
显示：无；
}
.表演：目标{
显示：无；
}
.show:target~.hide{
显示：块；
}
.show:target~.panel{
最大高度：100%；
}
.show:target~.fade{
边际上限：0；
}
.小组{
位置：相对位置；
宽度：自动；
最大高度：40px；
溢出：隐藏；
}
.褪色{
高度：20px；
位置：相对位置；
}

朋友们，我今天对你们说，让我们不要沉溺于绝望的深谷。因此，即使我们面对今天和明天的困难，我仍然有一个梦想。这是一个深深植根于美国梦的梦想。我梦想有一天这个国家
我梦想有一天，在佐治亚州的红山上，有前奴隶的儿子和前奴隶主的儿子
将能够坐在兄弟情谊的餐桌旁。我有一个梦想，有一天，甚至连密西西比州，一个因不公正和压迫而闷热的州，也会变成自由的绿洲




朋友们，我今天对你们说，让我们不要沉溺于绝望的深谷。因此，即使我们面对今天和明天的困难，我仍然有一个梦想。这是一个深深植根于美国梦的梦想。我梦想有一天这个国家
我梦想有一天，在佐治亚州的红山上，有前奴隶的儿子和前奴隶主的儿子
将能够坐在兄弟情谊的餐桌旁。我有一个梦想，有一天，甚至连密西西比州，一个因不公正和压迫而闷热的州，也会变成自由的绿洲




考虑一下这篇短文。足够短以隐藏“显示更多”按钮。
< /代码> 我将重新创建所有的特性，在这里我将依赖于使用“代码>位置的小黑客：粘性< /代码>，并考虑使用<代码>：活动< /代码> /<代码>：焦点< /代码>而不是<代码>：目标< /代码> ./p>
这只涉及你的第一点。有关详细信息，请参见代码中的注释

这不是一个完美的解决方案，它更像是一个近似值，因为您会发现一些缺点


.wrapper{
线条高度：1.2em；/*明确设置线条高度，便于控制*/
最大高度：计算（2*1.2米+2米）；/*显示在最大2线处*/
宽度：500px；
保证金：20px自动；
溢出：隐藏；
}
.wrapper.content{
位置：相对位置；
}
/*如果内容为2行或更少，这将隐藏show/less*/
.wrapper.content:after{
内容：“；
位置：绝对位置；
顶部：106%；/*从内容末尾开始*/
左：0；
右：0；
z指数：1；
背景：#fff；
高度：100px；/*大高度*/
}
/**/
.包装：第n个最后一个孩子（1），
.wrapper:第n个最后的子项（2）{
/*使元素具有粘性，以便在内容较大时显示在内容上方
之后的世界将不再隐藏他们
*/
位置：粘性；
底部：0；
背景：#fff；
光标：指针；
大纲：无；
颜色：红色；
线高：2米；
}
.包装器：聚焦，
.包装器：活动{
大纲：0；
最大高度：400px；
}
/*在点击后点击“显示更多”*/
.wrapper:focus.content:after，
.wrapper:活动。内容：之后，
.wrapper:focus:n最后一个子项（1），
.wrapper:活动：第n个最后的子级（1）{
显示：无；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。不允许使用公共物品，不允许使用公共物品，不允许使用公共物品。但在enim bibendum，iaculis turpis ac，congue dui。这是一个很好的例子。多尼克
这句话的意思是：“这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是：这句话的意思是
马萨·奎斯，埃吉特·泰卢斯·波特，索利西图丁·马萨·奎斯，
少展示
显示更多
同侧阴唇
少展示
显示更多
Lorem ipsum dolor eget tellus porta，sollicitudin massa quis，eget tellus porta，sollicitudin
少展示
显示更多
第三种方法是：第一种方法、第二种方法、第三种方法、第三种方法、第三种方法、第三种方法、第三种方法、第三种方法、第三种方法
少展示
显示更多