Geek Answers Handbook

Avoid wrapping the line between :: before the pseudo-element and the next word

Problem

I use ::before to generate a pseudo-element to display a small image to the left of the anchor text of the links. However, when recalibrating the width of the browser window, the line may be wrapped between the small image and the first word of the link anchor text, which is undesirable.

Desired Result

I want to save a small image and the first word of link anchor text together on one line.

I save display: inline in the a tag, because link binding text should be able to wrap the string, and not as a whole atomic field, but so that its first word fills the current line and continue any remaining words on the next line.

In addition, the text after the link will continue on the same line as the last word of the link binding text (provided that there is, of course, a place for its first word).

Note 1) If I used display:inline-block in the a tag, the entire link anchor text would be wrapped as an integer, which I don't want.

Note 2) I use display:inline-block for the pseudo-element because I need to set its width and height.

Note 3) I tried installing white-space: pre in a pseudo-element, but this did not solve the problem.

Thanks!

Code

The code is in a JSFiddle and repeated below for completeness.

My HTML:

 <p> Text text <a class="pre-icon" href="#">FirstWord word2 word3</a> text after link. </p>

My CSS:

 .pre-icon::before { content: ""; display: inline-block; width: 6px; height: 10px; background-color: transparent; background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7); background-repeat: no-repeat; margin-left: .13em; margin-right: .25em; white-space: nowrap; }
+6
source share
2 answers

The problem is that line breaking occurs between the pseudo-element and the content, so you cannot avoid this by setting white-space only the pseudo-element.

Instead, you can wrap the contents of the anchor inside the span, set white-space: nowrap to the entire anchor, and restore the initial white-space: normal in the gap.

 .pre-icon { white-space: nowrap; } .pre-icon > span { white-space: normal; } 

 .pre-icon::before { content: ""; display: inline-block; width: 6px; height: 10px; background-color: transparent; background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7); background-repeat: no-repeat; margin-left: .13em; margin-right: .25em; } .pre-icon { white-space: nowrap; } .pre-icon > span { white-space: normal; } 
 Text text <a class="pre-icon" href="#"><span>FirstWord word2 word3</span></a> text after link.
+8
source

Although it would be really cool if we could finally get: the first word selector (Great post by Chris Coyier about this: https://css-tricks.com/a-call-for-nth-everything/ ), you probably , you will need an extra interval for this. Here's the fork on your fiddle that looks like you described:

https://jsfiddle.net/0hrn2Lao/

HTML:

 <p>Text text <a class="pre-icon" href="#"> <span>FirstWord</span> word2 word3</a> text after link. </p>

CSS

 .pre-icon span { display:inline-block; text-decoration:underline;} .pre-icon span::before { content:""; display:inline-block; width:6px; height:10px; background-color:transparent; background-image:url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7); background-repeat:no-repeat; margin-left:.13em; margin-right:.25em; white-space:nowrap; }

Basically, place a pseudo-element with an image in the space containing the first word, and then let the span be inline-block , without resorting to the inline-block rule for the <a> element itself.

If you wanted to, you could use some jQuery to insert a scroll around the first word <a class="pre-icon"> throughout the document, but if you specifically add this class, it may not be much effort to just drop span in manually too ... depends on your tolerance to pain, I think :-)

+2
source

More articles:


All Articles