Bulma - 破坏标签中的文本答案

【问题标题】：Bulma - breaking text in a tagBulma - 破坏标签中的文本
【发布时间】：2019-05-05 18:16:11
【问题描述】：

如何打破 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%

** 添加了这个：** 文本对齐：左； display: inline-block !important;

【问题讨论】：

尝试使用 word-break 和 word-wrap 属性修复的表格布局。
codepen 的链接必须附有问题本身的代码
@Pete 谁说的？
Rules of SO - 如果您尝试插入一个没有代码的链接，它会说：指向 codepen.io 的链接必须附有代码。请使用代码工具栏按钮或 CTRL+K 键盘快捷键将所有代码缩进 4 个空格。如需更多编辑帮助，请单击 [?] 工具栏图标。 如果代码不在问题中，则不在主题范围内：寻求调试帮助的问题（“为什么这段代码不起作用？ ") 必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。
关键是链接腐烂，如果您的问题中没有代码并且笔不再可用，这对未来的访问者将毫无用处（而本网站的重点是成为未来有同样问题的访问者的仓库）

标签： css flexbox bulma

【解决方案1】：

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

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

将高度设置为自动。这样，元素可以垂直“增长”。
取消设置自动换行 (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>

【讨论】：