Как сдвинуть обернутый текст встроенного блока (после разрыва строки) вправо? - PullRequest
Новая
       10

Как сдвинуть обернутый текст встроенного блока (после разрыва строки) вправо?

1 голос
/ 10 июня 2019

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

Я использую библиотеку antd реагировать, поэтому у меня нет большой гибкости в создании сгенерированной разметки html без изменения кода библиотек. Тем не менее, у меня есть контроль над таблицей стилей.

Вот HTML-разметка, которую генерирует компонент Antd Tree Component (с некоторыми изменениями для удобства чтения): 

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

Вот текущее css: 


#container {
  width: 260px; background-color: #f1f1f1;
}

.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}

.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float:left;
}

.myTitle {
    display: inline;
    line-height: 24px;
    vertical-align: top;
}

ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

li {
    white-space: break-spaces;
}

Скрипка: https://jsfiddle.net/gLqosjmp/6/

Что я пробовал?

  • Создание myicon height до абсурда, но это сказывается на последующем. <li>
  • Изменение wrap и white-space и display обоих классов - но я не смог успешно получить результат

Вот что это делает: Текущий рендер

Вот что я хочу сделать: Targeted Render

Ответы [ 3 ]

2 голосов
/ 10 июня 2019

Если вы хотите, чтобы ваш текст хранился в определенных границах, самый простой способ может заключаться в том, чтобы отображать встроенные элементы (например, spans) в виде блока вместо встроенных и манипулировать их шириной и высотой.Или вы можете просто использовать flex, довольно просто, просто установите li на display: flex.

. Затем вы можете поиграться с flex-grow и другими дочерними свойствами, вот отличная справка по флексбоксу .. 

#container {
  width: 260px; background-color: #f1f1f1;
}

.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}

.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float:left;
}

.myTitle {
    display: inline;
    line-height: 24px;
    vertical-align: top;
}

ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

li {
    display: flex;
    white-space: break-spaces;
}
<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>
1 голос
/ 10 июня 2019

Вы можете добиться этого, просто добавив display: flex к вашему li 

#container {
  width: 260px;
  background-color: #f1f1f1;
}

.myicon,
.myTitle,
ul,
li {
  padding: 0;
  margin: 0;
}

.myicon {
  display: inline-block;
  width: 44px;
  line-height: 24px;
  text-align: center;
  vertical-align: top;
  float: left;
}

.myTitle {
  display: inline;
  line-height: 24px;
  vertical-align: top;
}

ul {
  list-style: none;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

li {
  /*The only change*/
  display: flex;
}
<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>
0 голосов
/ 10 июня 2019

Вы можете изменить .myTitle на inline-block и установить для него ширину. 

#container {
  width: 260px; background-color: #f1f1f1;
}

.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}

.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float: left;
}

.myTitle {
    display: inline-block;
    line-height: 24px;
    vertical-align: top;
    width: 210px;
}

ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

li {
    white-space: break-spaces;
}
<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>
...