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

推荐阅读
  • 本文详细探讨了HTML表单中GET和POST请求的区别,包括它们的工作原理、数据传输方式、安全性及适用场景。同时,通过实例展示了如何在Servlet中处理这两种请求。 ... [详细]
  • 本文探讨了如何在iOS开发环境中,特别是在Xcode 6.1中,设置和应用自定义文本样式。我们将详细介绍实现方法,并提供一些实用的技巧。 ... [详细]
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • This pull request introduces the ability to provide comprehensive paragraph configurations directly within the Create Note and Create Paragraph REST endpoints, reducing the need for additional configuration calls. ... [详细]
  • 本文探讨了使用C#在SQL Server和Access数据库中批量插入多条数据的性能差异。通过具体代码示例,详细分析了两种数据库的执行效率,并提供了优化建议。 ... [详细]
  • 在项目部署后,Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查,我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]
  • 2018-2019学年第六周《Java数据结构与算法》学习总结
    本文总结了2018-2019学年第六周在《Java数据结构与算法》课程中的学习内容,重点介绍了非线性数据结构——树的相关知识及其应用。 ... [详细]
  • 本文介绍如何使用 Angular 6 的 HttpClient 模块来获取 HTTP 响应头,包括代码示例和常见问题的解决方案。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互,涵盖了GET、POST、PUT和DELETE请求的实现,并展示了如何处理JSON响应。 ... [详细]
  • 我有一个SpringRestController,它处理API调用的版本1。继承在SpringRestControllerpackagerest.v1;RestCon ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
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社区 版权所有