Specify a line-break for responsive design
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>
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>
Not necessary an ideal answer for this question, but useful in similar situations:
Use "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.