Question

我有一个内联标签和只读文本。当只读文本溢出时，它会在标签下面。我希望文字不要贴在标签上。

这就是我得到的：

incorrect overflow

我希望在哪里：

 <div class="row">
        <div class="col-md-4">
                <h4 class="text-muted">Employer Information</h4>
                <div class="form-inline word-wrap">
                    <label class="control-label label-normalWeight">Name</label>
                    <strong><bean:write name="myform" property="name" /></strong>
                </div>
            .........
         </div>
       </div>

自动换行类如下：

.word-wrap {
    word-wrap: break-word;
}

Answer 1

如果您希望文本换行但不关心缩进到另一列的<strong>内容，则应将.word-wrap类更改为包含word-break: break-all;（这就是您需要的所有内容））：

.word-wrap {
    word-break: break-all;
}

然后使用.form-group类将您的元素括起来（您需要使用.control-label作为标签）：

 <div class="row">
    <div class="col-md-4">
        <h4 class="text-muted">Employer Information</h4>
            <div class="form-inline word-wrap">
                <div class="form-group">
                    <label class="control-label label-normalWeight">Name</label>
                    <strong class="word-wrap"><bean:write name="myform" property="name" /></strong>
                </div>
            </div>
        .........
     </div>
 </div>

http://www.bootply.com/ST1AlByo4g

但是，如果您希望缩进<strong>的全部内容，则最好创建另一组列 - 然后将.word-wrap类应用于<strong>元素或包装器：

<div class="row">
    <div class="col-md-4">
        <h4 class="text-muted">Employer Information</h4>
    </div>
</div>
<div class="row">
    <div class="col-md-1 col-xs-1">
        <label class="control-label label-normalWeight">Name</label>
    </div>
    <div class="col-md-3 col-xs-3">
        <strong class="word-wrap"><bean:write name="myform" property="name" /></strong>
    </div>
</div>

http://www.bootply.com/JLnvtz9o4i

Answer 2

<div class="row">
  <form class="form-horizontal">
    <div class="col-md-4">
      <h4 class="text-muted">Employer Information</h4>
      <div class="form-group">
        <label class="control-label col-sm-2" for="your_id_here">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="your_id_here">
        </div>
      </div>
    </div>
<!-- more fields -->      
  </form>
</div>

Bootply

如果您决定继续使用<strong>，只需将form-control类添加到其中，它就会正确对齐。

Answer 3

如果word-break: break-all或word-wrap:break-word不起作用，可能您的white-space设置为nowrap。

尝试设置：

white-space:normal;

Answer 4

<div class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    dsfdsfdsfdfdsfASSs
  </div>

</div>

http://www.bootply.com/KK1MlNLy5V

标签和文本在bootstrap

4 个答案: