Menu
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 :
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>
425
Press ALT+ENTER to insert the line break.
You could simply add a class to the BR tag and set it to be display:none by default. I've suggested static rather than block because I don't think that a BR tag is display block by default so probably best to simply go with static. Show activity on this post.
You can put text into spans and prevent line breaks inside them. This way line breaks could only happen between two spans: I definitely understand why you want this, and there have certainly been times that I have looked at a layout and at first thought, wanted the same thing.
STEP 1. Hide the vertical bar. Here, we add a span around the bar. It’s pretty straightforward. STEP 2. drop the E by adding a responsive line break. voila! Now here’s a neat little tip: You can actually style a br element. That’s it. Just the br with a class, and it’s a responsive line break.
Unfortunately, there is no way in HTML or CSS to express that some allowed line break point is more preferable than some other. If there were, we could expect to find it in the CSS3 Text module, but its current draft has nothing like that – just ways to control how allowed line break points are determined.
although it is called word break, all it does is tell the browser where to place a break if it needs to, rather than just defaulting to the last word that fits. It is indeed the simplest/best solution IMO. Vote that up! <wbr> merely gives the browser another place to insert a line-break if necessary.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
