CSS样式 - 缺少文本

我目前正在写一个测验的应用程序，其中三个潜在的答案铺有以下CSS的第二行：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，但文字环绕，以便宽行显示在彼此下面的多行？

谢谢！

Miktor

来源

2016-04-20 Miktor

删除 –

可以创建小提琴高度 – Jainam

同意，删除高度 –

只需删除该.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>

来源

2016-04-20 10:16:36

他问的宽度问题，而不是高度 –

@NabeelKhan OP是问高度，而不是宽度的问题。 –

@Reddy我想我的英语很弱:)然后问问他真的在问：D –

-1

你需要word-wrap: break-word;

这将包装，而不是躲在他们额外的字母。（其实他们不是躲在按你的CSS，他们蠢蠢欲动获取和不可见由于可能周围的元素

所以你的CSS现在变成：

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

在的jsfiddle例子： https://jsfiddle.net/nabtron/7jmrms3L/1/

来源

2016-04-20 10:26:38

CSS样式 - 缺少文本

回答

相关问题