html - 如果文本很短或字符数有限，CSS 隐藏按钮

Question

我使用以下 CSS ONLY 代码来显示或隐藏完整段落。请引用下面的片段。工作完美!但是，我们都知道，只有当段落中的文本太长时，才会显示这样的“显示更多”按钮。问题是，虽然按钮在这里工作正常并且可以很好地显示或隐藏文本，但即使句子太短或文本太有限(比如 1 或 2 行文本，可以轻松阅读，不需要“显示更多”按钮)。如何隐藏该按钮并仅在文本足够长以使该按钮实际出现时才显示？另外，如果是长句子，实际上会显示显示更多按钮，我希望在句子末尾有 3 个点(如...)，这表示有更多文本可供阅读。当 para 展开时这 3 个点显示消失，当 para 收缩回来时应该回来。

P.S:我期待的是 CSS ONLY 答案。请不要使用 jQuery 或 Javascript，因为我想保持简洁明了，不想把它搞得一团糟。

.panel-wrapper {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.show, .hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
  color: red;
}
.hide {
  display: none;
}
.show:target {
  display: none;
}
.show:target ~ .hide {
  display: block;
}
.show:target ~ .panel {
  max-height: 100%;
}
.show:target ~ .fade {
  margin-top: 0;
}
.panel {
  position: relative;
  width: auto;
  max-height: 40px;
  overflow: hidden;
}
.fade {
  height: 20px;
  position: relative;
}

<div class="panel-wrapper">
  <a href="#show1" class="show btn" id="show1">Show more</a>
  <a href="#hide1" class="hide btn" id="hide1">Show less</a>
  <div class="panel">
    Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
    will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
    will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
  </div>
  <div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
  <a href="#show2" class="show btn" id="show2">Show more</a>
  <a href="#hide2" class="hide btn" id="hide2">Show less</a>
  <div class="panel">
    Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
    will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
    will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
  </div>
  <div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
  <a href="#show3" class="show btn" id="show3">Show more</a>
  <a href="#hide3" class="hide btn" id="hide3">Show less</a>
  <div class="panel">
    Consider this short text. Short enough to hide "Show More" button.
  </div>
  <div class="fade"></div>
</div>

Answer 1

我会以不同的方式重新创建所有功能，我将依靠使用 position:sticky 的小 hack 并考虑使用 :active/:focus 而不是 :target。

这仅涵盖您的第一点。有关详细信息，请参阅代码中的注释。

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

.wrapper {
  line-height:1.2em; /* explicitely set the height of line to easily control */
  max-height: calc(2*1.2em + 2em); /* Show at max 2 line*/
  width: 500px;
  margin: 20px auto;
  overflow: hidden;
}

.wrapper .content {
  position:relative;
}
/* This will hide the show/less if the content is 2 lines or less*/
.wrapper .content:after {
  content:"";
  position:absolute;
  top:106%; /* Start at the end of the content */
  left:0;
  right:0;
  z-index:1;
  background:#fff;
  height:100px; /* A big height */
}
/**/
.wrapper :nth-last-child(1),
.wrapper :nth-last-child(2) {
  /*make the element sticky so they show above the content if the content is big
    and the after will no more hide them
  */
  position: sticky;
  bottom: 0;
  background: #fff;
  cursor:pointer;
  outline:none;
  color:red;
  line-height:2em;
}

.wrapper:focus,
.wrapper:active {
  outline: 0;
  max-height: 400px;
}
/*make the after and the "show more" on click*/
.wrapper:focus .content:after,
.wrapper:active .content:after,
.wrapper:focus :nth-last-child(1),
.wrapper:active :nth-last-child(1) {
  display:none; 
}

<div class="wrapper" tabindex=-1>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ipsum nunc, hendrerit ac arcu eu, pulvinar ultrices enim. Ut at enim bibendum, iaculis turpis ac, congue dui. Etiam faucibus lectus eget lorem molestie, finibus aliquet quam pretium. Donec
    eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin
    massa quis, eget tellus porta, sollicitudin massa quis,</div>
  <div tabindex=-1>show less</div>
  <div>Show more</div>
</div>

<div class="wrapper" tabindex=-1>
  <div class="content">Lorem ipsum dolor</div>
  <div tabindex=-1>show less</div>
  <div>Show more</div>
</div>

<div class="wrapper" tabindex=-1>
  <div class="content">Lorem ipsum dolor eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin</div>
  <div tabindex=-1>show less</div>
  <div>Show more</div>
</div>

<div class="wrapper" tabindex=-1>
  <div class="content">Lorem ipsum dolor eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin eget tellus porta, sollicitudin sollicitudin eget tellus porta, sollicitudin</div>
  <div tabindex=-1>show less</div>
  <div>Show more</div>
</div>