使列内的文本不会越过另一列

Question

我希望能够使一列内的文本太长而不会越过另一列。

FooComponent

这是我使用的代码和一张描述结果的图像。 我想要类似的东西：

askdl kansld knalskdn laknd
laksm dlams dlkams lmdak sdmlaksmd
La Askld Malsk姆达尔斯克mldaksml dkasm
ldkamsl dkamsl kdmalskmd alsm dlakm
skdlams kdm

但是我不知道如何实现这样的目标。有提示吗？

Answer 1

这是引导类white-space : nowrap中的text-truncate强制跨度元素“ #asd”将您的段落推入一行

  

nowrap       像平常一样折叠空格，但是抑制源中的换行符。

您可以通过以下方法解决此问题：

#asd {
  white-space : normal !important;
 }

立即检查：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vdivide">
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <span id="asd" style="white-space : normal" class="text-truncate">askdl kansld knalskdn laknd laksm dlams dlkams lmdak sdmlaksmd la
         askld malsk mdalsk mldaksml dkasm ldkamsl dkamsl kdmalskmd alsm dlakm skdlams kdm
      </span>
    </div>
  </div>
  <div class="vertical-divider"></div>
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <p class="border-bottom">
        <span class="font-weight-lighter">Sesso:</span>
        <span class="font-weight-lighter" id="sesso"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Data di nascita:</span>
        <span class="font-weight-lighter" id="dataNascita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Regione:</span>
        <span class="font-weight-lighter" id="regione"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Città:</span>
        <span class="font-weight-lighter" id="citta"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Anzianità di lavoro:</span>
        <span class="font-weight-lighter" id="anzianita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Disponibilità online:</span>
        <span class="font-weight-lighter" id="coachingOnline"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Email:</span>
        <span class="font-weight-lighter" id="email"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Cellulare:</span>
        <span class="font-weight-lighter" id="cellulare"></span>
      </p>
    </div>
  </div>
</div>

Answer 2

您可以使用span在display:block中换行。删除class="text-truncate"

.asd{
display:block
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vdivide">
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <span class="asd">askdl kansld knalskdn </span>
      <span class="asd">laknd laksm dlams dlkams lmdak sdmlaksmd la
                        </span>
      <span class="asd"> askld malsk mdalsk mldaksml dkasm ldkamsl  </span>
      <span class="asd"> dkamsl kdmalskmd alsm dlakm skdlams kdm
                        </span>
    </div>
  </div>
  <div class="vertical-divider"></div>
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <p class="border-bottom">
        <span class="font-weight-lighter">Sesso:</span>
        <span class="font-weight-lighter" id="sesso"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Data di nascita:</span>
        <span class="font-weight-lighter" id="dataNascita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Regione:</span>
        <span class="font-weight-lighter" id="regione"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Città:</span>
        <span class="font-weight-lighter" id="citta"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Anzianità di lavoro:</span>
        <span class="font-weight-lighter" id="anzianita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Disponibilità online:</span>
        <span class="font-weight-lighter" id="coachingOnline"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Email:</span>
        <span class="font-weight-lighter" id="email"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Cellulare:</span>
        <span class="font-weight-lighter" id="cellulare"></span>
      </p>
    </div>
  </div>
</div>