根据另一个元素的高度或溢出隐藏或显示的css元素

Question

我有一个行的列表，在一些行中有多行内容。

对于在多行中溢出的行，我希望显示一个用于切换高度的元素，而对于内容较小的行，我希望隐藏此切换元素。

有没有可能只使用css而不使用javascript来实现这一点？

Html代码应该是几乎任何东西都可以达到目标，只需添加一个jsfiddle作为起点即可。

​

div {
  position: relative;
  width: 70%;
  max-width: 820px;
}

p {
  line-height: 1.4rem;
  height: 1.6rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

div > label {
  position: absolute;
  top: 0;
  right: -25px;
}

label > i.toggle-off,
.hidden {
  display: none;
}

input:checked ~ p {
  overflow: visible !important;
  white-space: normal !important;
  display: block;
  height: 100%;
  background: #fff;
  z-index: 10;
}

input:checked ~ label > i.toggle-on {
  display: none;
}

input:checked ~ label > i.toggle-off {
  display: block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<h1>no js attempt, how to hide unuseful toggles?</h1>
<div>
  <input class='hidden' id="toggle-11" type="checkbox">
  <label for="toggle-11">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-12" type="checkbox">
  <label for="toggle-12">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>
<div>
  <input class='hidden' id="toggle-13" type="checkbox">
  <label for="toggle-13">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-14" type="checkbox">
  <label for="toggle-14">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>
<div>
  <input class='hidden' id="toggle-15" type="checkbox">
  <label for="toggle-15">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-16" type="checkbox">
  <label for="toggle-16">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>
<div>
  <input class='hidden' id="toggle-17" type="checkbox">
  <label for="toggle-17">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-18" type="checkbox">
  <label for="toggle-18">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>

​

https://jsfiddle.net/xwa3uk1p/2/

Answer 1

如果没有javascript，你不能做以上所有的事情，最好只用html/css来切换部分，这样：

​

.toggle-label {
    cursor: pointer;
    color: red;
}
.hidden,
.toggle-content {
    display: none;
}
input:checked ~ .toggle-label {
    display: none;
}
input:checked ~ .toggle-content {
    display: inline;
}

<p>Light text</p>
<p>Long text 
    <input class="hidden" id="toggle-1" type="checkbox">
    <label class="toggle-label" for="toggle-1">read more</label>
    <span class="toggle-content">
        reavealed.
    </span>
</p>

​

也在JSFiddle上

Answer 2

我想我终于成功了！反馈非常受欢迎。

​

div {
  position: relative;
  width: 80%;
  max-width: calc(80% - 35px);
  margin-bottom: 10px;
  /*border: solid 1px blue;*/
}

p {
  line-height: 1.4rem;
  height: 1.6rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding-right: 35px;
  margin-top: 0px;
  /*border: solid 1px orange;*/
}

p::after {
    content: '+';
    color: white;
    width: 55px;
    height: 35px;
    float: right;
    background-color: white;
    z-index: 10;
    position: relative;
    top: 0;
    right: -35px;
    /*border: solid 1px red;*/
}

div > label {
  position: absolute;
  top: 0;
  right: -35px;
  /*border: solid 1px yellow;*/
}

label > i.toggle-off,
.hidden {
  display: none;
}

input:checked ~ p {
  overflow: visible !important;
  white-space: normal !important;
  display: block;
  height: 100%;
  background: #fff;
  z-index: 10;
}

input:checked ~ label > i.toggle-on {
  display: none;
}

input:checked ~ label > i.toggle-off {
  display: block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div>
  <input class='hidden' id="toggle-11" type="checkbox">
  <label for="toggle-11">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-12" type="checkbox">
  <label for="toggle-12">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis</p>
</div>
<div>
  <input class='hidden' id="toggle-13" type="checkbox">
  <label for="toggle-13">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-14" type="checkbox">
  <label for="toggle-14">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>
<div>
  <input class='hidden' id="toggle-15" type="checkbox">
  <label for="toggle-15">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-16" type="checkbox">
  <label for="toggle-16">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>
<div>
  <input class='hidden' id="toggle-17" type="checkbox">
  <label for="toggle-17">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
  <input class='hidden' id="toggle-18" type="checkbox">
  <label for="toggle-18">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>
<div>
  <input class='hidden' id="toggle-19" type="checkbox">
  <label for="toggle-19">
    <i class="material-icons toggle-on add_circle_outline">&#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">&#xe15d;</i>
  </label>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod, ligula ac tristique mollis, nunc odio malesuada dui, et pulvinar magna lorem sed sapien. Integer ac lobortis velit, fermentum rutrum diam. Phasellus placerat magna sit amet egestas iaculis. In ac maximus sapien. Suspendisse sapien nibh, accumsan nec varius et, tempor vitae felis. Etiam mattis nulla interdum erat porta pretium a a mauris. Duis erat nunc, congue quis dui quis, sagittis vulputate eros. Cras urna purus, commodo non metus eu, commodo fermentum lectus. Sed maximus, dolor eu porttitor sollicitudin, tellus augue ultricies magna, eu aliquet turpis justo a est. Sed elementum nunc sed mi rhoncus consequat. Morbi volutpat nec purus eget commodo.</p>
</div>

​