Question

一个人如何在div中打破一长行文本？

我尝试过css的overflow-wrap: break-word;和word-wrap:break-word;都没有运气。

在此示例中，我在固定宽度为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>

最终解决方案

我将其添加到Luiz's solution中以达到所需的效果，使其表现得像普通标签：

**删除了此内容：** 宽度：100％

**添加了此内容：** 文字对齐：左；显示：inline-block！important;

Answer 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>

Bulma-打破标签中的文字

1 个答案: