使文本不在伪元素之前的图标中环绕? [英] Make text not wrap around icon in :before pseudoelement?

问题描述

我在:e伪元素之前的图标中有一个图标，如果文本元素变长并转到下一行，我希望它不要环绕我的伪元素，而是保持其距离.

I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance.

这是我的示例的链接: http://jsbin.com/yosevagaqa/1/edit?html,css,output

Here is a link to my example: http://jsbin.com/yosevagaqa/1/edit?html,css,output

如果您调整窗口的大小以使文本被强制换行，则可以看到问题.

If you resize the window so that the text is forces into a new line, you can see the problem.

如何避免这种情况?

推荐答案

从其他答案中可以看到，有多种解决方案！

As you can see from the other answers, there are multiple solutions!

如果:before中正方形的大小始终相同，则另一种解决方案是添加

If the size of the square in :before is always the same, one other solution would be to add

.link {margin-left:25px; text-indent:-25px;}

到CSS.这导致整个块向右移动，除了第一行(包含正方形)外，该行变得凹进".

to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".

http://jsfiddle.net/MrLister/3xbfyqkh/

或者我希望使用大小为em s的字体，以便红色正方形取决于字体大小.

Or what I would prefer, with sizes in ems, so that the red square depends on the font size.

.link:before {
  /* .. */
  width: 1em; height: 1em;
  margin-right: .5em;
}

.link {margin-left:1.5em; text-indent:-1.5em;}

当然要确保缩进与正方形的大小+边距相同.

Making sure, of course, that the indentation is the same as the size + the margin of the square.

http://jsfiddle.net/MrLister/3xbfyqkh/1/

由于目的是创建自定义项目符号"，因此另一种方法是将h5视为列表项.然后，您将不需要::before技巧.您还需要其他技巧来使正方形达到合适的大小...

Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...

.link {
    display:list-item; list-style:square;
    color:red;
    font-size:2em; line-height:.5em;
    margin:.5em 0 .5em 1em}

.link a {
    font-size:.417em; vertical-align:.3em}

http://jsfiddle.net/MrLister/3xbfyqkh/5/

这篇关于使文本不在伪元素之前的图标中环绕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！