web-dev-qa-db-ja.com

bootstrap 3水平方向の配置のためにdiv内のテキストコンテンツをラップ

ここでの私の投稿タイトルは誤解を招く恐れがあります。最初に私が現在持っているHTMLを見てみましょう： enter image description here

ご覧のとおり、各列のテキストコンテンツは次の列にオーバーフローします。第二に、それらはそれぞれ水平方向に整列していません。 （たとえば、view detailsのリンクはまっすぐに整列しません）。テキストの長さに関係なく、直線に揃えてほしい。

ここに私のHTMLコードがあります：（ここのコンテンツは動的に生成されます。したがって、アイテムの数は異なります）。コードではbootstrap 3を使用しています。

<div class="row" style="box-shadow: 0 0 30px black;">


      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2005 Volkswagen Jetta 2.5 Sedan (worcester   http://www.massmotorcars.com) $6900</h3>
        <p>
          <small>2005 volkswagen jetta 2.5 for sale has 110,000 miles powere doors,power windows,has ,car drives excellent ,comes with warranty if you&#39;re ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1355/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1355" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
      <!--/span-->
      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2006 Honda Civic EX Sedan (Worcester www.massmotorcars.com) $7950</h3>
        <p>
          <small>2006 honda civic ex has 110,176 miles, has power doors ,power windows,Sun roof,alloy wheels,runs great, cd player, 4 cylinder engen, ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1356/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1356" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
      <!--/span-->
      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2004 Honda Civic LX Sedan  (worcester www.massmotorcars.com) $5900</h3>
        <p>
          <small>2004 honda civic lx sedan has 134,000 miles, great looking car, interior and exterior looks Nice,has cd player, power windows ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1357/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1357" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
</div>
htmlcsstwitter-bootstrapdjango-templatestwitter-bootstrap-3
34
eagertoLearn

次のスタイルをh3要素に追加します。

Word-wrap: break-Word;

これにより、長いURLがラップされます。ワードラップのデフォルト設定はnormalです。これは、URLには存在しない限られたセットのスプリットトークン（空白、ハイフンなど）でのみラップします。

69
kpentchev

ワードラップの更新は次のように置き換えられます。

overflow-wrap:break-Word;

互換性のある古いナビゲーターとcss 3それは良い選択肢です！

それはワードラップの進化です（2012年以来...）

詳細情報を参照してください： https://www.w3.org/TR/css-text-3/#overflow-wrap

完全な互換性を参照してください： http://caniuse.com/#search=overflow-wrap

20
Css lover