html - 即使 max-width 显示 小于 max，分词符也不起作用

Question

我想在我的应用程序上做最简单的事情，但我不能完全让它工作。我想要的只是“评估”这个词。在下一行。

我使用以下 css 创建了围绕它的 div 和文本本身。

#name{
  height: 60px;
  background-color: #353A50;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 16px;

  p{
    font-family: Gibson SemiBold;
    font-size: 14px;
    color: white;
    margin: 0;
    line-height: 16px;
    max-width:30px;
    word-wrap:break-word;
  }
}

和 HTML:

<div class="template-option">
  <div id="image"></div>
  <div id="name">
    <p>{{template.title}}</p>
  </div>
</div>

我在做什么蠢事？

预期结果:

Fire Risk
Assessment

Answer 1

所有需要的是:

空白:正常；