Загрузочный текстовый контент в 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>

Ответы

Ответ 1

Добавьте к вашим h3 следующий стиль:

word-wrap: break-word;

Это приведет к переносу длинных URL-адресов. Значение по умолчанию для word-wrap - normal, которое будет переноситься только при ограниченном наборе токенов разделения (например, пробелов, дефис), которые отсутствуют в URL-адресе.

Ответ 2

Теперь обновление word-wrap заменяется на:

overflow-wrap:break-word;

Совместимый старый навигатор и css 3 это хорошая альтернатива!

это эволюция обертывания слов (с 2012 года...)

См. дополнительную информацию: https://www.w3.org/TR/css-text-3/#overflow-wrap

См. совместимость: http://caniuse.com/#search=overflow-wrap

Ответ 3

1) Возможно, oveflow: hidden; будет делать трюк?

2) Вам нужно установить размер каждого div с текстом и кнопкой, чтобы каждый из этих divs имел одну и ту же высоту. Затем для вашей кнопки:

button {
  position: absolute;
  bottom: 0;
}