Bulma

Question

如何在 div 中打断一长行文本？

我已经尝试了 css 的 overflow-wrap: break-word; 和 word-wrap:break-word;，但没有成功。

在这个例子中，我在 table 中使用标签，它的固定宽度为 300px。

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%

** 添加了这个：** 文本对齐：左；显示：内联块！重要；

Answer 1

首先，你应该使用span而不是div

您可以自定义 .tag class 作为设置 height: auto 和 white-space: unset

将高度设置为自动。这样，元素就可以垂直"grow"。
取消自动换行(white-space: unset)
将宽度设置为 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>

Bulma - 破坏标签中的文本

Bulma - breaking text in a tag

css

flexbox