Geek Answers Handbook

Define a line break for responsive design

I cannot find how to indicate at what point the line should break when the screen is not large enough. For example, I would like the text "Commune: CENON-SUR-VIENNE" to break after the colon. Is there any syntax that allows you to specify this manually and not leave Bootstrap CSS automatically?

I am including part of my HTML code below. I pointed out the meta tag well inside <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>
+4
source share
4 answers

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

.

<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>
+5

, . (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>
Hide result
+2

You can use the available classes "to switch content at viewpoints." For instance:

<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>
Run codeHide result
0
source

You can manage in a flexible style by reducing the font size

0
source

More articles:


All Articles