Geek Answers Handbook

While holding two items in a row, allow text overflow

I tried to display two inline elements. The first element is a normal element, and the second is an anchor tag. If the length of the anchor tag text exceeds the available space, I want it to wrap the next line, preferably without interrupting the word between them.

But I could not achieve the inline style when I tried to break the word.

The anchor simply moves on to the next line when the length of the text exceeds the current line. An example that I would like to show:

||| Hello Mannnnnnnnnn |||

||| nnnnnnnnnnnnnnnnnn |||

.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>`
Run codeHide result

After the encoding, there is a code

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

I tried to make flexbox style, but it is even worse. After coding hasdisplay:flex

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

+4
2

1.) DIV s, span ( ).

2.) DIV - ( p) -

3.) - a &nbsp; ( )

4.) , , , , <span>, word-wrap: break-word;, /DIV.

5.) , .

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

"" , , - (&#8203;), ( URL-, ) ( ) javascript .

.parent {
  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="#">Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man&#8203;Man</a>
  </div>
</div>`
Hide result

, .

Edit:

white-space: nowrap; .first ( &nbsp;) .first .second html.

.parent{
  display : inline;
}
.first{
  display : inline;
  white-space: nowrap;
}
.second{
  display : inline;
  word-wrap: break-word;
}
<div class="parent">
  <div class="first">Hello </div><div class="second"><a href="#">ManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManManMan</a>
  </div>
</div>
Hide result
0

More articles:


All Articles