Question

我知道这很简单。我有一个按钮：

<a class="btn btn-choice rectangle" (click)="setQuestion(question, !question.active, $event)" [ngClass]="{ 'active': question.active }"
  href="#">
  <span class="fa fa-square"></span>
  <span class="fa fa-check-square"></span>
  <span class="title">{{ question.description }}</span>
</a>

根据按钮状态（我正在使用bootstrap btw）隐藏fa类。它的css看起来像这样：

.btn-choice {
    @include make-text-sizes($h1-sizes);
    font-weight: 300 !important;
    color: white !important;
    background-color: $midnight;
    display: block;
    margin-bottom: 30px;
    text-align: left;

    .header {
        padding: 0.375rem 0.75rem;
    }

    .title {
        padding-right: 40px;
        display: block;
    }

    .fa {
        float: right;
        display: none;
        margin-top: 7px; // Center vertically?
    }

    &:hover,
    &:focus {
        font-weight: 400 !important;
        background-color: $cyan;
        .fa-square {
            display: block;
        }
    }

    &:active,
    &.active {
        font-weight: 400 !important;
        background-color: $cyan;
        .fa-check-square {
            display: block;
        }
        .fa-square {
            display: none;
        }
    }
}

现在，我正在尝试使标题具有一些填充，因此它永远不会与“方形复选框”重叠，但是我无法使其正常工作。如您所见，.title被设置为一个块，并且我已经设置了一些padding-right。如果我检查一下元素，则可以看到该轮廓位于链接中，但文本会一直贯穿其中。

这是一个有问题的codepen：

https://codepen.io/r3plica/pen/LJZQqb

Answer 1

我想我可能有解决办法-

主要变化是-

.btn-choice {
   padding: 20px 30px;
}

.title {
  display: block;
  width: 90%;
  white-space: initial;
}

https://codepen.io/DarianSteyn/pen/eLzMzp

Answer 2

我已为您更新了代码笔。 https://codepen.io/charumaheshwari/pen/NLrMXb。想法是将padding-right：40px赋予“ title”

.title {
    display: block;
    padding-right:40px;
    white-space: initial;
  }

Answer 3

我知道这很简单；看来我可以只将white-space: pre-wrap;添加到.title即可解决问题。

Answer 4

我改编了您的示例并使用了flexbox，并且如上所述，它已经覆盖了引导标准中的white-space。

请参阅分叉的代码笔：https://codepen.io/dreitzner/pen/bxevvP

HTML没有正确包装

4 个答案: