Блог

Я хочу окружить многострочный текст li рамкой.

Я также хочу:
1) Сделать так, чтобы граница обтекала только каждый элемент, как это делается для корневого элемента
[Решено!] 2) Сделайте границу там, где заканчивается текст, не растягиваясь в сторону
3) Добавьте некоторый интервал между границами каждого элемента.

Иллюстрация:https://i.imgur.com/o6jd4rK.png

HTML:

 <ul>
  <li class="root">
    Root
  </li>
  <li>
              Lorem ipsum<br>dapibus neque<br>Tincidunt mauris
        <ul>
          <li>Adipiscing elit.</li>
          <li>Tincidunt mauris eu risus.</li>
          <li>Vestibulum </li>
        </ul>
  </li>
  <li>Aliquam</li>
  <li>
    Dapibus
    <ul>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
  </li>
</ul>
  

SCSS:

 $maincolor: #F76464;

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 50px;
}

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;

  li {
    font-size: 16px;
    position: relative;
    border: 1px solid $maincolor;

    amp;::before {
      position: absolute;
      left: -15px;
      top: 0px;
      content: '';
      display: block;
      border-left: 1px solid $maincolor;
      height: 1em;
      border-bottom: 1px solid $maincolor;
      width: 10px;
    }

    amp;::after {
      position: absolute;
      left: -15px;
      bottom: -7px;
      content: '';
      display: block;
      border-left: 1px solid $maincolor;
      height: 100%;
    }

    amp;.root {
      margin: 0px 0px 0px -20px;

      amp;::before {
        display: none;
      }

      amp;::after {
        display: none;
      }
    }

    amp;:last-child {
      amp;::after {
        display: none;
      }
    }
  }
}
  

Скрипка:https://jsfiddle.net/aky4hwtn/31 /

До сих пор я пытался использовать разные типы отображения, заполнение, инкапсулирование текста тегом div и т.д. Без особого успеха.

Я исправил ваши 3 проблемы следующим образом:

1. Оберните только текст, а не любые подсписки, с помощью <div class="node">{text}</div> . node Класс применяет границу, и поскольку он обтекает только текст, а не подсписки, граница проходит только вокруг узла. Чтобы это выглядело красиво, я добавил немного padding .
2. Новая обертка <div class="node"> s будет использовать всю ширину, поэтому display: inline-block применяется к node классу только с использованием необходимого пространства.
3. У node класса есть margin-bottom , чтобы получить некоторое пространство ниже. Для учета этого пришлось изменить размер before / after элементов.

Я исключил корень из списка, потому что в противном случае было бы <li> для корня, у которого есть подсписок со всеми остальными, что для меня не имеет особого смысла.

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

 * {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 50px;
  font-size: 16px;
}

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2;
}

li {
  position: relative;
}

li::after {
  position: absolute;
  left: -10px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid red;
  height: 100%;
}

li::before {
  position: absolute;
  left: -10px;
  top: -10px;
  content: '';
  display: block;
  border-left: 1px solid red;
  height: 32px;
  border-bottom: 1px solid red;
  width: 10px;
}

li:last-child::after {
  display: none;
}

.node {
  display: inline-block;
  border: 1px solid red;
  padding: 5px;
  margin-bottom: 10px;
}  

 <div class="node">
  Root
</div>
<ul>
  <li>
    <div class="node">Lorem ipsum<br>dapibus neque<br>Tincidunt mauris</div>
    <ul>
      <li>
        <div class="node">Adipiscing elit.</div>
      </li>
      <li>
        <div class="node">Tincidunt mauris eu risus.</div>
      </li>
      <li>
        <div class="node">Vestibulum</div>
      </li>
    </ul>
  </li>
  <li>
    <div class="node">Aliquam</div>
  </li>
  <li>
    <div class="node">Dapibus</div>
    <ul>
      <li>
        <div class="node">Aliquam tincidunt mauris eu risus.</div>
      </li>
      <li>
        <div class="node">Vestibulum auctor dapibus neque.</div>
      </li>
    </ul>
  </li>
</ul>