Solution 1 :

I’m not sure why yet, but it appears to be fixed if you remove the span tag. It looks like you could also just remove the styles you have on a span.

Problem :

How to stop the link with an arrow drop on the second line and have it inline with the paragraph on the smaller devices?

Here is how it displays now:
Issue

I want it to not break the line and continue where the empty space is:
enter image description here

p {
  word-break: keep-all;
}

a,
p {
  font-size: 30px;
}

a span {
  display: inline-block;
  white-space: nowrap;
}

img {
  width: 20px;
}
<p> Lorem ipsum dolorem
  <a href="#"><span>Very long text very long text very long text</span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a> Blahblah blah
</p>

Comments

Comment posted by Cihangir Bozdogan

Wow :). did anyone understand his question?

Comment posted by Nanina

@CiBoz I have updated it, hopefully it makes a bit more sense now:)

Comment posted by Cihangir Bozdogan

I didn’t mean to be rude. I just thought it was hard to understand. No offence pls. I gave you an up vote lol

Comment posted by Nanina

@CiBoz No worries. I’ve been told I’m horrible at explaining 🙂

Comment posted by j08691

So do you want all the text to flow together with no unusual line breaks? If so then just remove all of your CSS except for the img rule.

By

Leave a Reply

Your email address will not be published. Required fields are marked *