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

在CSS中解决内容过长的问题

当我们写css的时候,有时候会忘记设计里面存在的临界情况。举个例子来说吧,当内容的长度超过了我们的期望值,我们也无法解释其中的可能性,页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作,但至少我们可以用不同类型的内容来测试,以减少这种情况的发生。在这篇文章里,我们通过审查真实网站的各种的UI问题来解释这些网站可能会崩溃的原因。准备好了么?来吧!

当我们写css的时候,有时候会忘记设计里面存在的临界情况。举个例子来说吧,当内容的长度超过了我们的期望值,我们也无法解释其中的可能性,页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作,但至少我们可以用不同类型的内容来测试,以减少这种情况的发生。

在这篇文章里,我们通过审查真实网站的各种的UI问题来解释这些网站可能会崩溃的原因。准备好了么?来吧!

一个右侧/左侧有小图标的按钮

在CSS中解决内容过长的问题

这是一个手风琴效果的开关按钮。按钮右侧有一个小图标用来强调它是可点击的。然而当按钮的区域不够长的时候,按钮上的文字会盖住图标。当我们没有考虑到较长内容的时候这种情况就可能发生。

一个解决办法是在右侧增加足够的padding值来适应图标的大小

.button {
  padding-right: 50px;
}

注意我们是如何增加padding值来给图标创造出一块安全的显示区域的,现在我们可以确定按钮的布局不会再被破坏了。

在CSS中解决内容过长的问题

输入占位符

当在我们的论坛使用浮动标注模式的时候,特别是按钮在右侧的这种情况,我们需要充分的测试来避免因为占位符过长而导致的问题。

在CSS中解决内容过长的问题

一个解决办法是给按钮添加 position: relative,这样会让按钮覆盖在占位符上层。

长名字

在CSS中解决内容过长的问题

在这个设计中,图片向左浮动,右侧有作者名字的信息。当右侧的信息长度过长的时候会发生什么呢?毫无疑问布局会崩掉。

这里的问题是我们只向左浮动了图片,使得作者的名字移动到贴着它,但是这只会在作者名字长度较短的时候才会表现良好。

为了使页面布局的适应性更强,我们需要给这两个元素都增加 width。更推荐的方式是使用flexbox,更适合这样的小型组件。

文章内有长链接/单词

在CSS中解决内容过长的问题

有时文章内会包含该一些很长的超链接或者单词,当在视窗很宽的时候可能不会造成问题。但是对于一些尺寸较小的设备,诸如手机或平板电脑,这可能会产生烦人的横向滚动条。

对于这个问题我们有两个解决方案:

1)使用CSS word-break

.article-body p {
  word-break: break-all;
}

word-break属性在不同的浏览器内表现不太一样,因此在使用的时候需要充分测试。

2) 给外层元素添加overflow和 text-overflow

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

这个方案对于过长的链接比较友好,对于长单词,我推荐使用 word-break。

在CSS中解决内容过长的问题

过长的文章标签

在CSS中解决内容过长的问题

当我们放置一个文章标签在卡片上,我们最好只通过设定它的padding来确定它的大小。当标签的内容过长的时候,写死高度和宽度可能会造成布局崩掉。

也可以给标签设定一个最小的宽度,当对padding包裹的标签内容元素使用min-width属性时,宽度是动态变化的,问题就解决了。

带有固定链接的段落头

在CSS中解决内容过长的问题

这个例子是在段落标题的右侧有一个‘view more’链接。有几种不同的方式来编写CSS,其中一种是对链接使用绝对定位。

当标题过长的时候可能会造成一些问题,一个更好的解决办法是使用flexbox布局,这样的话当没有足够空间的时候会自动将链接挤到下一行去。

在CSS中解决内容过长的问题

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

上面这个技巧被称呼为'对齐移动包裹'。

在CSS中解决内容过长的问题


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 我们


推荐阅读
  • 本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例,深入解析了游戏逻辑、动画效果及用户交互的实现过程,为开发者提供了宝贵的参考和实践经验。 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 本指南详细介绍了在Linux环境中高效连接MySQL数据库的方法。用户可以通过安装并使用`mysql`客户端工具来实现本地连接,具体命令为:`mysql -u 用户名 -p 密码 -h 主机`。例如,使用管理员账户连接本地MySQL服务器的命令为:`mysql -u root -p pass`。此外,还提供了多种配置优化建议,以确保连接过程更加稳定和高效。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 本文深入解析了Java面向对象编程的核心概念及其应用,重点探讨了面向对象的三大特性:封装、继承和多态。封装确保了数据的安全性和代码的可维护性;继承支持代码的重用和扩展;多态则增强了程序的灵活性和可扩展性。通过具体示例,文章详细阐述了这些特性在实际开发中的应用和优势。 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 在 CentOS 6.5 系统上部署 VNC 服务器的详细步骤与配置指南
    在 CentOS 6.5 系统上部署 VNC 服务器时,首先需要确认 VNC 服务是否已安装。通常情况下,VNC 服务默认未安装。可以通过运行特定的查询命令来检查其安装状态。如果查询结果为空,则表明 VNC 服务尚未安装,需进行手动安装。此外,建议在安装前确保系统的软件包管理器已更新至最新版本,以避免兼容性问题。 ... [详细]
  • 2018年9月21日,Destoon官方发布了安全更新,修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中,攻击者可以通过构造特定的HTTP请求,利用该漏洞在服务器上执行任意代码,从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本,以确保系统的安全性。 ... [详细]
  • 经过两天的努力,终于成功解决了半平面交模板题POJ3335的问题。原来是在`OnLeft`函数中漏掉了关键的等于号。通过这次训练,不仅加深了对半平面交算法的理解,还提升了调试和代码实现的能力。未来将继续深入研究计算几何的其他核心问题,进一步巩固和拓展相关知识。 ... [详细]
  • 本文探讨了 Java 中 Pair 类的历史与现状。虽然 Java 标准库中没有内置的 Pair 类,但社区和第三方库提供了多种实现方式,如 Apache Commons 的 Pair 类和 JavaFX 的 javafx.util.Pair 类。这些实现为需要处理成对数据的开发者提供了便利。此外,文章还讨论了为何标准库未包含 Pair 类的原因,以及在现代 Java 开发中使用 Pair 类的最佳实践。 ... [详细]
  • 本文首先介绍了BGP的基本概念和基础知识,详细解析了BGP的不同邻居类型及其作用。接着,文章对BGP的报文格式、状态机以及路由宣告原则进行了深入探讨,包括本地宣告、引入宣告和缺省路由的处理方法。通过这些内容,读者可以全面了解BGP路由协议的核心机制及其在实际网络中的应用。 ... [详细]
  • 在Python中,是否可以通过使用Tkinter或ttk库创建一个具有自动换行功能的多行标签,并使其宽度能够随着父容器的变化而动态调整?例如,在调整NotePad窗口宽度时,实现类似记事本的自动换行效果。这种功能在设计需要显示长文本的对话框时非常有用,确保文本内容能够完整且美观地展示。 ... [详细]
  • 深入解析 Android TextView 中 getImeActionLabel() 方法的使用与代码示例 ... [详细]
author-avatar
平安
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有