用于textarea的多行附加组件

Question

我正在使用bootstrap 4输入组，并使用附加组件作为标签附加或假装我的输入。 对于输入，它看起来不错。现在，我需要一个多行附加项或文本区域标签。 我正在寻找Bootstrap或CSS中最好的解决方案。

这是我正在尝试的代码。

    <style>
        .h-unset {
           height: unset !important;
        }
        .multiline-label {
           display: inline-block;
           word-wrap: break-word;
           word-break: break-word;
           width: 100%;
        }
    </style>

    <div class="input-group input-group-sm mb-3 row mx-0">
        <div class="input-group-prepend col-md-3 px-0">
            <label for="naastVastgoedbeleg-ging"
            class="input-group-text w-100 rounded-0 multiline-label h-unset"
            id="label-naastVastgoedbeleg-ging">
                <strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
            </label>
        </div>
        <textarea id="naastVastgoedbeleg-ging" 
        class="form-control rounded-0 col-md-9 h-unset" 
        aria-label="naastVastgoedbeleg-ging" 
        aria-describedby="label-naastVastgoedbeleg-ging">
        </textarea>
    </div>

感谢您帮助快乐编码！

Answer 1

它通过使用此CSS起作用

.multiline-label strong {
            white-space: pre-wrap;
        }