spiritson spiritson - 1 year ago 63
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">
<div class="second">
<a href="#">ManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManMan</a>

Following codepen has the code


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


Answer Source

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