Bulma - взлом текста в теге - PullRequest
Новая
       50

Bulma - взлом текста в теге

0 голосов
/ 04 декабря 2018

Как разбить длинную строку текста в div?

Я безуспешно пробовал overflow-wrap: break-word; и word-wrap:break-word; css.

В этом примере я использую тегвнутри таблицы с фиксированной шириной 300 пикселей.

https://codepen.io/will-abbott/pen/qQwMMZ

<table class="table is-bordered" width="300">
    <tr>
      <th><div class="tag">This is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element!</div></th>
      <th><div class="tag">This is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element!</div></th>
    </tr>
</table>

Окончательное решение

Я добавил это к Решение Луиза для достижения желаемого эффекта, который заставляет его вести себя как обычный тег:

** убрал это: ** ширина: 100%

** добавил это: ** текст-выровнять по левому краю;дисплей: встроенный блок! важный;

1 Ответ

0 голосов
/ 04 декабря 2018

Прежде всего, вы должны использовать span вместо div

Вы можете настроить .tag класс как настройку height: auto и white-space: unset

  1. Установитьвысота как авто.Таким образом, элемент может «расти» по вертикали.
  2. Отключить перенос слов (white-space: unset)
  3. Установить ширину как 100%, чтобы элемент заполнил столбец, как и ожидалось. 

.tag__custom {
  height: auto !important;
  white-space: unset !important;
  color: purple !important;
  width: 100%
}

/** I've used !important just to force an example. You must define the priority in your style tree */
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<table class="table is-bordered" width="300">
      <thead>
        <tr>
          <th><div class="tag tag__custom">This is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element!
            </div></th>
          <th><div class="tag tag__custom">This is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element!</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Three</td>
          <td>Fouasdfr</td>
        </tr>
      </tbody>
    </table>
...