iuap-design/snippets/examples/utilities/2-text -wrapping/widget.html

UI Framework Used For Enterprise.

<p>文字是否包裹换行</p>
<div class="example example-box u-container-fluid " style="width:500px">
    <div class="u-row">
        <div class="u-col-md-3">
            <div class="text-hide h" style="border:1px solid #e6e8ea;">
                我被隐藏了
            </div>
        </div>
        <div class="u-col-md-3">
            <div class="text-truncate h" style="border:1px solid #e6e8ea;">
                内容显示一行，超出的内容使用“...”代替 This is text truncate.This is text truncate.
            </div>
        </div>
        <div class="u-col-md-3">
            <div class="text-break h " style="border:1px solid #e6e8ea;">
                This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
            </div>
        </div>
        <div class="u-col-md-3">
            <div class="text-nowrap h" style="border:1px solid #e6e8ea;overflow: hidden;">
                内容显示一行，不换行 This is text nowrap.This is text nowrap.
            </div>
        </div>
    </div>
</div>