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

推荐阅读
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 本文详细探讨了Java中的ClassLoader类加载器的工作原理,包括其如何将class文件加载至JVM中,以及JVM启动时的动态加载策略。文章还介绍了JVM内置的三种类加载器及其工作方式,并解释了类加载器的继承关系和双亲委托机制。 ... [详细]
  • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
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社区 版权所有