Menu
My post title here could be misleading. first have a look at HTML i have currently: 
As you can see, each column's text content overflows to next column. Secondly, each of them is not horizontal aligned. (eg the link for view details does not align straight). I want them to be aligned straight irrespective of length of text.
Here is my HTML code: (the content here is dynamically generated. so the no of items will vary). I use bootstrap 3 in my code.
<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're ...</small> </p> <p> <a class="btn btn-default" href="/search/1355/detail/" role="button">View details »</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 »</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 »</a> <button type="button" class="btn bookmark" id="1357" > <span class=" glyphicon glyphicon-star-empty "></span> </button> </p> </div> </div> 
618
Wrap. Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap , wrapping with .flex-wrap , or reverse wrapping with .flex-wrap-reverse . Responsive variations also exist for flex-wrap .
If you've faced the situation when you need to wrap words in a <div>, you can use the white-space property with the "pre-wrap" value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you'll need the word-wrap property.
Just add the class . text-center to the parent element of the text to center content horizontally.
col-lg- stands for column large ≥ 1200px. col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
Add the following style to your h3 elements:
word-wrap: break-word; This will cause the long URLs in them to wrap. The default setting for word-wrap is normal, which will wrap only at a limited set of split tokens (e.g. whitespaces, hyphens), which are not present in a URL.
120
Now Update word-wrap is replace by :
overflow-wrap:break-word; Compatible old navigator and css 3 it's good alternative !
it's evolution of word-wrap ( since 2012... )
See more information : https://www.w3.org/TR/css-text-3/#overflow-wrap
See compatibility full : http://caniuse.com/#search=overflow-wrap
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
