spiritson spiritson - 5 months ago 19
CSS Question

Keeping two elements inline, allow overflow text to wrap

I was trying to display two elements inline. First element is normal element and second one is an anchor tag. If the anchor tag text length exceeds the available space, I want it to wrap next line, preferably without breaking word in between.

But I am not able to achieve the inline-style when I tried break-word.

The anchor just moves to next line when the length of the text exceeds the current line. Example way I would like to display is:


||| Hello Mannnnnnnnnn |||

||| nnnnnnnnnnnnnnnnn |||




.parent {
// display : flex;
//display : inline;
}
.first {
display: inline;
}
.second {
display: inline;
max-width: fill-available;
word-wrap: break-word;
}

<div class="parent">

<div class="first">
Hello
</div>
<div class="second">
<a href="#">ManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManMan</a>
</div>
</div>`





Following codepen has the code

http://codepen.io/anon/pen/GqrJmo

I was trying to do flexbox style but that's worse. Following codepen has
display:flex


http://codepen.io/anon/pen/RRKPQr

Answer

1.) Don't use DIV s, but span s (which are inline by default).

2.) Just put it all into one DIV without any speacial settings (could also just be a p tag) - I erased a lot from the original code

3.) Make the space between the first word and the second - log - word a &nbsp; (non breaking space)

4.) Since you probably don't want subsequent words in the same container to break, wrap the first word and the link with a <span> tag to which you assign the word-wrap: break-word; instead of the whole container/DIV.

5.) for the rest, see my snippet

.x {
  word-wrap: break-word;
}
<div>
  <span class="x">Hello&nbsp;<a href="#">ManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManMan</a>
  </span> and some other bla bla bla bla bla bla blab bla bla bla bla bla bla bla bla bla bla
</div>`