Question

我想实施＆＃34;显示/隐藏＆＃34;仅使用css的文本。我试着在小提琴中使用代码。

.show-hide-text {
  display: flex;
  flex-wrap: wrap;
}

.show-hide-text a {
  order: 2;
}

.show-hide-text p {
  position: relative;
  overflow: hidden;
  max-height: 60px; // The Height of 3 rows
}

.show-hide-text p {
  display: -webkit-box;
  -webkit-line-clamp: 3; // 3 Rows of text
  -webkit-box-orient: vertical;
}

.show-less {
  display: none;
}

.show-less:target {
  display: block;
}

.show-less:target ~ p {
  display: block;
  max-height: 100%;
}

.show-less:target + a {
  display: none;
}

效果很好。但我遇到了一个问题。如果我点击＆＃34;显示更多＆＃34;链接，它将滚动到页面的底部。我再次转到页面顶部，然后单击show less链接。我该如何解决这个问题？

Answer 1

它滚动到Transaction.joins(accounts: :banks)...的位置，是使用.show-less时的标准行为。

您可以通过在页面的to处使用 ghost 元素来避免这种情况，这样做的好处是可以定位页面上的任何元素。

＆＃13;

:target

＆＃13;

html, body {
  margin: 0;
}
.show-hide-text {
  display: flex;
  flex-wrap: wrap;
}
.show-hide-text a {
  order: 2;
}
.show-hide-text p {
  position: relative;
  overflow: hidden;
  max-height: 60px; /* The Height of 3 rows */
}
.show-less {
  display: none;
}
 
#show-more:target ~ .show-hide-text p {
  max-height: 100%;
}
#show-more:target ~ .show-hide-text a.show-less {
  display: block;
}
#show-more:target ~ .show-hide-text a.show-more {
  display: none;
}

＆＃13;

Answer 2

这是一个简化的答案。希望这是你需要的;）

刚刚更改了目标元素并简化了css以获得期望的结果！

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

.show-hide-text {
  display: flex;
  flex-wrap: wrap;
}

.show-hide-text a {
  order: 2;
}

.show-hide-text p {
  position: relative;
  overflow: hidden;
  max-height: 60px; // The Height of 3 rows
}

.show-hide-text p {
  display: -webkit-box;
  -webkit-line-clamp: 3; // 3 Rows of text
  -webkit-box-orient: vertical;
}

.show-less {
  display: none;
}


/* Simplified Css For Show Hide */

#a1:target a.show-less {
  display: block
}

#a1:target a.show-more {
  display: none
}

#a1:target p {
  display: block;
  max-height: 100%;
}

＆＃13;

<div class="show-hide-text" id="a1">
  <a class="show-more" href="#a1">Show more</a>
  <a class="show-less" href="#">Show less</a>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

＆＃13;

css show hide jump issue

2 个答案: