css阻止换行_CSS中,如何处理短内容和长内容?

本文已经过原作者 shadeed 授权翻译。

当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题。

在许多情况下,添加或删除一个单词会改变 UI 的外观,更糟的是,它可能会破坏原有的设计,使其无法访问。在我学习 CSS 的早期,我低估了添加或删除一个单词的作用。在本文中,我会介绍几种不同的技巧,智米们可以马上使用它们来处理CSS中不同长度的文本。

问题

在讨论处理文本内容的技巧之前,先来解释一下这个问题,假设我们有一个垂直导航。

0175929151095b064162d723aded5fed.png

名字的长度可以变化,特别是如果你是在一个多语言网站工作。在上面的示例中,随着名称变长,它被包装到第二行。这里有一些问题

  • 应该把这段文字截短吗
  • 应该换成多行吗?如果是,最多可以换行多少行?

这种情况下单词比预期的多,但是当单词太长时会发生什么呢?默认情况下,它将溢出其容器。

4d3a9b5f4677f6a711c661de0b0f9dbe.png

作为专业前端开发人员,重要的是要确定在这种情况下应该要知道怎么处理。幸运的是,有一些CSS属性就是专门用于解决此类问题。

除此之外,问题不仅在于长内容,短内容也会破坏UI,或者至少会让它看起来很奇怪。如下面的示例

a0e46d07e98a229e13357a49583dd3ce.png

带有ok文本的按钮的宽度非常小。我并不是说这是一个致命的问题,但它会让按钮看起来很弱或很难被注意到。

在这种情况下我们该怎么办?也许在按钮上设置min-width?无论内容长度如何,都可以提供安全的宽度。

长内容

在,大家已经对问题有所了解,我们接着深入研究CSS 技巧,这些技巧可为处理长内容提供解决方案。

overflow-wrap

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

e4a2d4aaf99479ea029ecd2821022576.png

Hyphens

CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。

.element {  hyphens: auto;}
d896fb9184142d75c7db79dc3e4d7f0b.png

文本截断处理

截断是指在句子的末尾添加点,以表明有更多的文本内容。

306d8ca351642f3a18236d53832b4dcb.png

没有text-truncation属性或其他属性,但是它混合了一些CSS属性,可以为我们完成工作。

.element {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

多行文本截断处理

如果要截断多个行,可以使用line-clamp属性。

.element {  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;}

要让这种工作,必须使用display: -webkit-box。-webkit-line-clamp指定截断工作的最大行数。

a6c8e771ce4f97ae44cf536d43db31b7.png

这种技巧的缺点是,如果要为元素添加padding,它很容易失败。当添加padding时,会导致显示下一行的一部分,这本应该要被截断的。见下图:

e9d5ab56640fb41b7b626a36b49dea56.png

水平滚动

有时候,截断或连接一个单词并不总是可行。例如,当一个长字换成新行时,JavaScript代码可能会变得难以阅读。在这种情况下,水平滚动将使阅读体验更好。

7229098441941912a0d478aadbb7988a.png

Padding

在某些情况下,大家可能会忘记添加padding,直到我们注意到一个视觉问题。考虑以下问题:

1779209d764322e3f98b926794669ca3.png

这里有一个复选框列表,其中有一个非常接近它的兄弟项。发生这种情况的原因是网格上没有间距。这是来自Techcrunch网站的一个真实的例子。

短内容

这对大家来说并不常见,但在设计和构建UI时,也是一个要重要考虑的事项。

设置一个最小宽度

回到本文开头向大家展示的一个示例。我们要如何增强它并使按钮看起来更好?

b1b67f6dac8f7adc9de5c4cf2532154b.png

我们可以通过在按钮上添加min-width来解决此问题,这样一来,它就不会低于该宽度。

f2fbe02df7e1676582e100b33ddd9e3f.png

现在大家已经对问题及其解决方案有了一定的了解,我们来探索web上的一些用例和示例。

用例和示例

个人资料卡

这是长内容的常见示例。很难预测名称的长度。我们应该如何应对呢?

/* 方案1 */.card__title {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}/* 方案2 */.card__title {  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}

导航项

在处理多语言布局时,内容长度会发生变化。考虑以下示例

cb5580bdf683475ab7f0838d5c3a86b5.png

LTR(从左到右)的导航项About比RTL(从右到左)的导航项大。在RTL中,项目看起来太小了。可点击区域太小不利于用户体验。我们能做什么?在这种情况下,最好为导航项设置最小宽度。

.nav__item {  min-width: 50px;}
e860837e7fed98c6637282858288ecad.png

文章内容

一个长词或一个链接是很常见的,尤其是在手机上。考虑以下

dbd8fc226c0e7e920e28a402fe5c04d4.png

上面有一个很长的单词,它会上容器溢出导致水平滚动。我们可以通过使用overflow-wrap或hyphens来解决这个问题。

.article-content p {  overflow-wrap: break-word;}

购物车

产品名可以从一个单词到多行不等。在本例中,由于没有在它们之间添加足够的间距,产品名称太接近删除按钮。

a4f01629e8c412454d5b14ed7da0a98c.png

这个解决方案可以通过添加padding或margin来实现,这取决于你们的上下文,为了简单起见,这里使用margin解决方案。

.product__name {  margin-right: 1rem;}

Flexbox和长内容

flexbox

和长内容会发生某种行为,从而导致元素溢出其父元素。考虑以下示例:

fec98d0e617b5de563ece1771649fcc2.png

html

  
    

Ahmad Shadeed

  
  Follow

css

.user {  display: flex;  align-items: flex-start;}.user__name {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}

然而,当内容很长时,这就不起作用了。文本将溢出它的父文件。

1ddd2391a67cd5555b1d5a48482b8b43.png

原因是 flex 项不会收缩到其最小内容大小以下。为了解决这个问题,我们需要在flex项目.user__meta上设置min-width: 0。

.user__meta {  /* other styles */  min-width: 0;}
4d99f3077e34549926ea4ff0672dd4fd.png

总结

我希望智米们已经学会了处理CSS中短内容和长内容的不同技巧。我很喜欢这篇文章,因为它帮助我记住了一些小细节,这对未来的项目会很有帮助。

完~ 我是小智,我们下期见~


作者:shadeed 译者:前端小智 来源:ishadeed

原文:https://isheed.com/article/css-short-long-connt/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

duilib设置透明窗口_界面开发心得与Duilib | 学步园

一、设置窗体透明度和指定透明色(如指定了黑色,即所有黑色的部分将会变得透明)DWORD dwExStyleGetWindowLong(m_hWnd,GWL_EXSTYLE);if((dwExStyle&WS_EX_LAYERED)!WS_EX_LAYERED)SetWindowLong(m_hWnd,GWL_EXSTYLE,dwExStyle|WS_EX_LAYERED);HMODULE hInst Loa…

influxdb无法实现关联表_InfluxDb专业术语

InfluxDb专业术语重复是最好的学习方式,我们再重复一些Influx的概念吧,虽然很多已经讲过,甚至上一课已经讲了。我发现我自己还是有点啰嗦,不过这可能是一种好的学习方法哦。聚合函数aggregationaggregation是一个InfluxQL的函数&a…

mysql排序区分大小写吗_MySQL操作数据时区分大小写

一般情况下使用SQL语句执行update login_ticket set status1 where ticket‘ABC‘会将ticket’abc‘的数据也改掉,那么需要在列名ticket的后面加上collate utf8_binupdate login_ticket set status1 where ticket COLLATE utf8_bin‘ABC‘这里的collate后面的是指该…

java的四种访问权限_Java四种访问权限

一、访问权限简介访问权限控制: 指的是本类及本类内部的成员(成员变量、成员方法、内部类)对其他类的可见性,即这些内容是否允许其他类访问。Java 中一共有四种访问权限控制,其权限控制的大小情况是这样的:public > protected …

java分割汉字_Java分割中英文,并且中文不能分割一半?

最近准备入其他坑位。在面试过程中,遇到下面这题笔试题,拿出来分享分享。题目:编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串。但是要保证汉字不被截半个,如“我ABC”4&…

full gc JAVA_java触发full gc的几种情况概述

前言近期被问及这个问题,在此记录整理一下。System.gc()方法的调用此方法的调用是建议JVM进行Full GC,虽然只是建议而非一定,但很多情况下它会触发 Full GC,从而增加Full GC的频率,也即增加了间歇性停顿的次数。强烈影响系建议能不使用此方法就别使用,让…

java excel条件格式_Java 设置Excel条件格式(高亮条件值、应用单元格值/公式/数据条等类型)...

概述在Excel中,应用条件格式功能可以在很大程度上改进表格的设计和可读性,用户可以指定单个或者多个单元格区域应用一种或者多种条件格式。本篇文章,将通过Java程序示例介绍条件格式的设置方法,设置条件格式时,因不同设…

java order()_java.util.Collections.reverseOrder()

描述reverseOrder()方法被用来获取强加实现可比接口的对象collection的自然顺序相反的比较器。声明以下是java.util.Collections.reverseOrder()方法的声明。public static Comparator reverseOrder()参数NA返回值方法调用返回一个比较器,该比较器对实现Comparable接…

jsp mysql登录 demo_java jsp+servlet+mysql实现登录网页设计

涉及以下几个文件:1。登录页面 login.jsp2,成功跳转页面 success.jsp3,失败跳转页面 fail.jsp4,servlet 处理类 LoginTestServlet.java5,配置文件 web.xml--------------------------------------------- 依次看代码 …

libsvm java下载_一个基于LIBSVM(JAVA)的股票预测demo

【实例简介】一个基于LIBSVM的股票价格预测程序,采用随机森林算法对样本进行训练和预测,使用的编程语言为JAVA。【实例截图】【核心代码】stock-master└── stock-master├── data│ ├── 000752.csv│ ├── 300251.csv│ ├── 300329.c…

mysql 家谱树查询_中国家谱族谱数据库可以登录、查询了

原标题:中国家谱族谱数据库可以登录、查询了中青在线武汉6月6日电(党波涛 中国青年报中青在线记者 雷宇)数据量全球第一,最早可追溯到明朝万历年间。华中师范大学中国农村研究院今天对外发布,由该院建设的中国家谱族谱数据库正式上线&#xf…

mysql-5.5.56配置_mysql 5.5.56免安装版配置方法

mysql 5.5.56免安装版配置方法发布时间:2020-10-18 23:16:23来源:脚本之家阅读:74作者:阿安安mysql 5.5.56免安装版配置方法,本文通过文字代码详解,具体内容如下所示:1. 下载mysql-5.5.56-winx6…

MySQL命令梳理_MySQL操作命令梳理(2)

一、表操作在mysql运维操作中会经常使用到alter这个修改表的命令,alter tables允许修改一个现有表的结构,比如增加或删除列、创造或消去索引、改变现有列的类型、或重新命名列或表本身,也能改变表的注释和表的类型。下面就针对alter修改命令的…

java 进度条_进度条Java

你必须使用线程.设计一个实现Runnable接口的类,它将更新这样的值.class ProgressBarUpdator implements java.lang.Runnable {/*** Progress bar that shows the current status*/private javax.swing.JProgressBar jpb null;/*** Progress bar value*/private java.lang.Inte…

java 文件存储_文件存储学生信息(JavaIO流)

package com;import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.util.Scanner;/*** author Administrator*1.要求:有五个学生,每个学生有姓名、年龄 、成绩三个属性&a…

位运算java_Java中的位运算

Java中的位运算,说实话,工作了两年的时间里,从来没有用过一次,因为平时都是些的是业务代码,很少接触比较底层的东西,我记得第一次在代码中看到还是在HashMap的Hash算法中看到的,这次重拾Java基础…

java蓝桥杯dfs_第七届 蓝桥杯决赛 Java B组 打靶 解题报告(DFS,回溯,全排列)-Go语言中文社区...

题目:打靶小明参加X星球的打靶比赛。比赛使用电子感应计分系统。其中有一局,小明得了96分。这局小明共打了6发子弹,没有脱靶。但望远镜看过去,只有3个弹孔。显然,有些子弹准确地穿过了前边的弹孔。不同环数得分是这样设…

guid mysql_关于MySQL:MySQL-如何搜索GUID

我正在使用第三方.NET库(Rhino Security),将其标识符存储为mysql数据库中binary(16)字段中的向导。 一切都可以从该应用程序完美地工作,但是当我尝试通过查询编辑器(对于MySQL为TOAD)手动运行查询时,没有行返回我知道存在的标识符。 例如&…

java 单例 生命周期_Rhythmk 一步一步学 JAVA (13) Spring-2 之Ben懒加载以及生命周期,单例...

1、定义Demo类:package com.rhythmk.spring;public class User {public void Init (){System.out.println("User 对象被 创建!");}// 计数器public int Count0;public void Say(){this.Count;System.out.println("User 被"this.Coun…

java 高级泛型_java泛型的高级应用

展开全部在上面的例子中,由于没有限制class GenericsFoo类型持有者T的范围,实际上这里32313133353236313431303231363533e59b9ee7ad9431333339666666的限定类型相当于Object,这和“Object泛型”实质是一样的。限制比如我们要限制T为集合接口类…