CODEWITHSUNDEEP
css
Laurent D.
Laurent D.

Reputation: 480

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

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:

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.

Upvotes: 0

Views: 2993

Answers (3)

Larpee
Larpee

Reputation: 820

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.

Upvotes: 1

Emma Earl Kent
Emma Earl Kent

Reputation: 578

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);
}

Upvotes: 0

Ricky Dam
Ricky Dam

Reputation: 1895

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;

}

Upvotes: 0

Related Questions