热门标签 | 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;
    }
}

推荐阅读
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • Netty源代码分析服务器端启动ServerBootstrap初始化
    本文主要分析了Netty源代码中服务器端启动的过程,包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用,深入理解Netty服务器端的启动过程。同时,还介绍了LoggingHandler的作用和使用方法,帮助读者更好地理解Netty源代码。 ... [详细]
  • 本文介绍了Cocos2dx学习笔记中的更新函数scheduleUpdate、进度计时器CCProgressTo和滚动视图CCScrollView的用法。详细介绍了scheduleUpdate函数的作用和使用方法,以及schedule函数的区别。同时,还提供了相关的代码示例。 ... [详细]
  • http:valor-software.comng2-bootstraphttps:www.primefaces.orgprimeng#autocomplete转载于:https: ... [详细]
  • PRML读书会第十四章 Combining Models(committees,Boosting,AdaBoost,决策树,条件混合模型)...
    主讲人网神(新浪微博:豆角茄子麻酱凉面)网神(66707180)18:57:18大家好,今天我们讲一下第14章combiningmodel ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 本文介绍了Java的集合及其实现类,包括数据结构、抽象类和具体实现类的关系,详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接,帮助读者更好地理解和使用Java的集合类。 ... [详细]
  • imx6ull开发板驱动MT7601U无线网卡的方法和步骤详解
    本文详细介绍了在imx6ull开发板上驱动MT7601U无线网卡的方法和步骤。首先介绍了开发环境和硬件平台,然后说明了MT7601U驱动已经集成在linux内核的linux-4.x.x/drivers/net/wireless/mediatek/mt7601u文件中。接着介绍了移植mt7601u驱动的过程,包括编译内核和配置设备驱动。最后,列举了关键词和相关信息供读者参考。 ... [详细]
  • Android日历提醒软件开源项目分享及使用教程
    本文介绍了一款名为Android日历提醒软件的开源项目,作者分享了该项目的代码和使用教程,并提供了GitHub项目地址。文章详细介绍了该软件的主界面风格、日程信息的分类查看功能,以及添加日程提醒和查看详情的界面。同时,作者还提醒了读者在使用过程中可能遇到的Android6.0权限问题,并提供了解决方法。 ... [详细]
  • Centos7搭建ELK(Elasticsearch、Logstash、Kibana)教程及注意事项
    本文介绍了在Centos7上搭建ELK(Elasticsearch、Logstash、Kibana)的详细步骤,包括下载安装包、安装Elasticsearch、创建用户、修改配置文件等。同时提供了使用华为镜像站下载安装包的方法,并强调了保证版本一致的重要性。 ... [详细]
  • 本文介绍了贝叶斯垃圾邮件分类的机器学习代码,代码来源于https://www.cnblogs.com/huangyc/p/10327209.html,并对代码进行了简介。朴素贝叶斯分类器训练函数包括求p(Ci)和基于词汇表的p(w|Ci)。 ... [详细]
  • 由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。那么如何实现跨域呢,以下是实现跨域的一些方法。 ... [详细]
  • 详解 Python 的二元算术运算,为什么说减法只是语法糖?[Python常见问题]
    原题|UnravellingbinaryarithmeticoperationsinPython作者|BrettCannon译者|豌豆花下猫(“Python猫 ... [详细]
  • 移动传感器扫描覆盖摘要:关于传感器网络中的地址覆盖问题,已经做过很多尝试。他们通常归为两类,全覆盖和栅栏覆盖,统称为静态覆盖 ... [详细]
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社区 版权所有