make a div containing text fill up to the parent width before text going on a second line

Question

I have the following code:

html:

<div class="outer">
  <div class="inner">
    some very very very very very very long text  
  </div>
</div>

css:

outer{
  position:absolute;
  width:100%;
  height:40%;
  background: rgba(0,0,0,.5);
}
.inner{
  position:absolute;
  bottom:10%;
  left:50%;
  max-width:100%;
  transform: translate(-50%, 0%);
  background: rgba(0,0,0,.5);
}

I want the text to be kept on one line as long as there is enough space in the outer div. But if the isn't enough space, then the shall be displayed on 2 lines.

I also need:

the text to be centered,
to be able to position the text vertically (bottom:10%;)
the background of the inner div to be around the text, not on the full line

In the above code, there is available space when the text starts to be displayed on 2 lines.

I have tried white-space nowrap, but it never goes on 2 lines...

Here is the jsfiddle: https://jsfiddle.net/yqvtgdhp/2/

The problem happens when the outer div becomes too narrow: try to decrease its width by resizing the browser's window for example.

Other than the positioning this would be the default behaviour (once the the` white-space` property is removed. It's unclear what the actual problem is. — Paulie_D, Jul 24 '17 at 14:50
looks like it already goes to 2 lines if you add more text or reduce the viewport width? I don't understand the problem — Michael Coker, Jul 24 '17 at 14:50
If you are trying to eliminate the spacing on the first line when the text wraps, **you can't**. That's not the way the line-box model works. — Paulie_D, Jul 24 '17 at 14:54

Larpee · Accepted Answer · 2017-07-24T15:17:05.337

1

To make the text fill the outer div, I changed the max-width property to width. Then, to center the text horizontally, I added the text-align: center; property.

To make background only cover text, add a span around the text and set the background property on that tag. Refer to this question.

.outer{
  position:absolute;
  width:100%;
  height:40%;
  background: rgba(0,0,0,.5);
}

.inner{
  position:absolute;
  bottom:10%;
  left:50%;
  width:100%;
  transform: translate(-50%, 0%);
  text-align:center;
}

.wrapper {
  background: #FFFFFF;
}

 <div class="outer">
  <div class="inner">
  <span class="wrapper">
    some very very very very very very long text   very very very very very very very very very very very very very very very very very very very very very very very ver</span>
  </div> 
</div>

Let me know if this works for you.

edited Jul 24 '17 at 15:17

answered Jul 24 '17 at 14:56

Larpee

800
1
7
18

This is almost what I need, but I also need the background of the inner div to be around the text, not on the full line. I will update my description. – Laurent D. Jul 24 '17 at 15:09
@LaurentD. Edited my answer. Does this work for you? – Larpee Jul 24 '17 at 15:17
Yes, it works. I just had found the same solution thanks to all the answers, and was on the verge to post it. Thanks – Laurent D. Jul 24 '17 at 15:30

score 0 · Answer 2 · answered Jul 24 '17 at 14:55

Refer to this for more information:
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Here is an updated JSFiddle: https://jsfiddle.net/yqvtgdhp/3/

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

In the jsfiddle, the text wraps event if there are still space on both sides of the text. So that's not a solution for me. — Laurent D., Jul 24 '17 at 15:06

score 0 · Answer 3 · answered Jul 24 '17 at 14:59

0

You can try making the parent div 'outer' relative position and make the child div 'inner' absolute position. This will allow the child to be centered within the parent and use all of it's space. Try this for your css:

.outer{
position:relative;
width:1920px;
height:400px;
background: rgba(0,0,0,.5);
}

.inner{
position:absolute;
bottom:10%;
text-align: center;
margin: 0 auto;
width: 100%;
background: rgba(0,0,0,.5);
}

answered Jul 24 '17 at 14:59

Emma Earl Kent

498
5
12

This is almost what I need, but I also need the background of the inner div to be around the text, not on the full line. I have updated my description – Laurent D. Jul 24 '17 at 15:15

make a div containing text fill up to the parent width before text going on a second line

3 Answers3