wiltomap wiltomap - 5 months ago 21
CSS Question

Specify a line-break for responsive design

I can't find how to specify at which point a string should break when a screen is not large enough. 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>

Answer

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>
Comments