即使max-width显示的<p>小于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

所需要的是以下内容：

white-space: normal;

Answer 2

为您的p定义宽度并为其显示块：

#name{
    height: 60px;
    background-color: #353A50;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 16px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
        display: block;
        width:60px;
        font-family: Gibson SemiBold;
        font-size: 14px;
        color: white;
        margin: 0;
        line-height: 16px;
    }
}