字体真棒星号换行

Question

我在 bootstrap 框架中使用了很棒的字体。每当我根据需要标记字段时，星号（fa-asterisk）都会正确显示。但是，它显示在文本输入下方。我尝试过的一些事情：

1. .fa { display:inline; // also tried inline-block

2. 用overflow:hidden标记输入字段的容器div（表单组）：

   .form-group
   {
       overflow:hidden;
       overflow-wrap:inherit;
   }
   

似乎没有任何效果，仍然将星号包裹在输入字段下方。更改输入字段容器的大小（从 col-md-6 更改为更小）也无济于事。

这是我的代码：

.formValidation({
      message: 'This value is not valid',
      //err: {
      //    container: 'tooltip'
      //},
      framework: 'bootstrap',
      icon: {
        //required: 'glyphicon glyphicon-asterisk',
        //valid: 'glyphicon glyphicon-ok',
        //invalid: 'glyphicon glyphicon-remove',
        //validating: 'glyphicon glyphicon-refresh'
        required: 'fa fa-asterisk',
        valid: 'fa fa-check',
        invalid: 'fa fa-times',
        validating: 'fa fa-refresh'

      }

这是我的 CSS：

.fa-asterisk:before {
  display: inline-block;
  line-height: inherit;
  color: darkred;
  font-size: 7px;
  content: "\f069";
}

这是我的 HTML：

<div class="form-group">
  <label class="col-md-6 control-label" for="patientSSN">Patient SSN</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="patientSSN" id="patientSSN" placeholder="" value="">
  </div>
</div>

Answer 1

请显示您的代码以获得完整的解决方案，为了快速解决您可以这样做：

.validator{
    white-space:nowrap;
}