Search code examples
csstwitter-bootstraptwitter-bootstrap-3line-breaks

Specify a line break point for mobile/responsive design

I need to break a line at a specific point in mobile/small views. For instance, I'd like the text « Commune : CENON-SUR-VIENNE » to break after the colon character. Is there a syntax that allows to specify this manually instead of leaving Bootstrap CSS doing it automatically?

I include a piece of my HTML code below. I have well specified the meta tag inside the <head> :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Screenshot :

enter image description here

HTML code:

<div class="container">
  <div class="tab-content">
    <div class="col-lg-5">
      <div>
        <h4>Commune : CENON-SUR-VIENNE</h4>
      </div>
    </div>
  </div>
</div>
Solution

  • you could try this. https://jsfiddle.net/5vwh46f8/1/

    Putting the second word in a span and adding a style inline-block.

    <div class="container">
<div class="tab-content">
<div class="col-lg-5">
  <div>
  <h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
  </div>
</div>
</div>
</div>

<style>
h4 span{
display: inline-block;
} 
</style>