CSS 样式 - 缺少第二行文本

Question

我目前正在编写一个测验应用程序，其中三个可能的答案使用以下 CSS 设置样式:

.answer {
            color               : Black;
            background-color    : Aqua;
            border-radius       : 5px;
            height              : 38px;
            width               : 320px;
            padding             : 5px;
            line-height         : 38px;
            text-align          : center;
    }

当潜在答案的文本长度超过 320 像素时，其余文本不会显示。我如何更改此 css 以使宽度保持 320px，但文本换行以便宽线显示在一行下面的多行中？

谢谢!

米克托

Answer 1

只需删除 .answer 的 height:

.answer {
  color: Black;
  background-color: Aqua;
  border-radius: 5px;
  width: 320px;
  padding: 5px;
  line-height: 38px;
  text-align: center;
}

<div class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis arcu. Curabitur eleifend pellentesque gravida. Proin non erat lectus. Etiam dui mauris, commodo a sapien ut, convallis mollis turpis. Nulla pretium eros id risus vestibulum, id viverra lectus tincidunt. Nam vitae condimentum dui, non blandit odio. Nunc ornare elementum turpis nec condimentum. Nulla et commodo tortor, vel eleifend sem. Duis molestie iaculis erat, et facilisis enim.</div>