css - Bulma - 破坏标签中的文本

Question

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

我试过 css 的 overflow-wrap: break-word; 和 word-wrap:break-word; 但没有成功。

在这个例子中，我在一个固定宽度为 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>

最终解决方案

我将其添加到 Luiz's solution达到使其表现得像普通标签的预期效果:

** 删除了这个:** 宽度:100%

** 添加了这个:** 文本对齐:左； 显示:内联 block !重要；

Answer 1

首先，你应该使用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>