热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

图标和文本之间的断行,即使是和。?-Linebreakbetweeniconandtextevenwith ?

Icantfigureouthowtoputanonbreakablespacebetweenaniconandthecorrespondingtext.我不知道

I can't figure out how to put a non breakable space between an icon and the corresponding text.

我不知道如何在图标和相应的文本之间放置一个不可分割的空间。

For example

例如

 someText

<我类= " bla> ,someText

ignores the   in lower screen resolutions and displays the text under the icon. Is there any other method to make sure that an icon and some text to the right is always in line, regardless of the available space?

忽略了,在较低的屏幕分辨率和显示文本下的图标。是否有其他方法来确保图标和右边的一些文本始终在一行中,而不考虑可用空间?

Thanks in advance!

提前谢谢!

3 个解决方案

#1


4  

Set a container and use the rule white-space

设置一个容器并使用空白规则。

HTML

HTML

 someText

CSS

CSS

.container{
display: block;
white-space: nowrap;
}

DEMO HERE

演示

Read more about white-space

阅读更多关于空白

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

#2


0  

the element by itself is not a block element. Meaning, it would not try to take the whole vertical space it can get, unless you tell it to do so in your CSS.

元素本身不是块元素。也就是说,它不会试图占用整个垂直空间,除非你让它在CSS中这样做。

Check if you have set the styling of .bla and see if its display is not block; ..

检查是否设置了.bla的样式,查看其显示是否为block;. .

.bla {
  display: block;
}
block i element -- new line after me Some Text here




non block i element --  Some Text here

#3


0  

If you want to have different rules depending on the screen size, you can use media queries. to have a space after your block "i" you can add margin or create a container that have a width of some lettres (using em unit).

如果您希望根据屏幕大小有不同的规则,可以使用媒体查询。在您的块“i”之后有一个空间,您可以添加边距或创建一个具有一些lettres(使用em单元)宽度的容器。

http://www.w3.org/TR/css3-mediaqueries/

http://www.w3.org/TR/css3-mediaqueries/

 someText

css:

css:

@media screen and (max-width: 640px){
    i{
        margin-right: 0em;
    }
}
@media screen and (min-width: 641px){
    i{
        margin-right: 3em;
    }
}

推荐阅读
author-avatar
FrxxGp
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有