элемент css, скрытый или отображаемый на основе высоты или переполнения другого элемента

ProgramBox

элемент css, скрытый или отображаемый на основе высоты или переполнения другого элемента

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня есть список строк с многострочным содержимым в некоторых строках.

Для строк, которые переполняются в нескольких строках, я хочу показать элемент для переключения высоты, в то время как я хочу скрыть этот элемент переключения для строк с небольшим содержимым.

Возможно ли добиться этого только с помощью 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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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/

Ответ №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

1. Похоже, я смог с этим справиться, дайте мне знать, если вам нравится мое решение, спасибо!

2. Да, хорошее решение, хотя переключатель находится за пределами содержимого … приветствия

Ответ №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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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">amp;#xe148;</i>
    <i class="material-icons toggle-off remove_circle_outline">amp;#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>