具有Bootstrap类的文本溢出：表单控制

Question

我的文字在List<Object> list(String name) { def qry = "select new map(i.id as id, i.item as item, c.name as category) from Category c join c.inventory i where upper(c.name) like upper(:name+'%')" List<Object> results = em.createQuery(qry).setParameter('name',name).getResultList() return results } 元素中溢出，该元素具有以下类：span

代码：

form-control

当<div class="row"> <div class="form-group col-sm-12"> <label>Notes:</label> <span class="form-control"><%= @stuff.notes %></span> </div> </div> 有大量文字时，会溢出如下：

我确实看过this question以及this ticket within bootstrap。我仍然无法提出解决方案。

更新

我意识到我可以使用这样的表单助手（即使它不是表单）：

@stuff.notes

这就是这样的：

但我不喜欢禁用的html属性如何灰显框并使文本静音。这使得用户难以阅读。

Answer 1

您可以使用基本面板来获得类似的感觉。见Bootply Here

<label>Notes:</label>
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

如果你真的想要匹配form-control类的外观，你可以添加一个自定义.inset-box-shadow类，它将覆盖面板上的盒子阴影，并赋予它那个强大的外观。这可能会使用户感到困惑，他们可能想要点击并输入它。