'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>
csstwitter-bootstraptwitter-bootstrap-3line-breaks


Solution 1:[1]

Use a "responsive" <br> tag:

<style>
br.responsive {
  display: inline; // Show BR tag for narrow screens
}

@media (min-width: 320px) { // or whatever you are after
  br.responsive {
    display: none; // Hide BR tag for wider screens
  }
}
</style>


Some text <br class="responsive" /> more text.

Solution 2:[2]

The more straightforward option is to use the display classes built-in to Bootstrap and hide a <br /> based on screen size.

<h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>

The use of columns or wrapping content in spans is overkill; just throw in a little display class and show/hide as needed.

Solution 3:[3]

To avoid breaking on a hyphen, use a non-breaking hyphen character. (U+2011)

h4 { width: 200px }
<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON?SUR?VIENNE</h4>

Solution 4:[4]

You can use the available classes "for toggling content across viewport breakpoints". For example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>

Solution 5:[5]

I think a media query could give you better control. What if you only wanted to break on desktop (1) didn't want it to break on mobile (2)?

  1. enter image description here

  2. mobile

The HTML:

<div class="col-12 text-center">   
    <h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>

And the CSS:

@media (min-width: 700px) {
    .title-break {
        display: inline-block;
    }
}

Solution 6:[6]

You Can Manage in responsive style through decrease font-size

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BBaysinger
Solution 2 Metro Smurf
Solution 3 Alohci
Solution 4
Solution 5 ow3n
Solution 6 Saika

Related Questions