这篇文章主要介绍如何处理长短文本内容的小技巧,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
当我们使用CSS构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题。
在许多情况下,添加或删除一个单词会改变UI的外观,更糟的是,它可能会破坏原有的设计,使其无法访问。在我学习CSS的早期,我低估了添加或删除一个单词的作用。在本文中,我会介绍几种不同的技巧,智米们可以马上使用它们来处理CSS中不同长度的文本。
<强>问题
在讨论处理文本内容的技巧之前,先来解释一下这个问题,假设我们有一个垂直导航。
名字的长度可以变化,特别是如果你是在一个多语言网站工作。在上面的示例中,随着名称变长,它被包装到第二行。这里有一些问题
应该把这段文字截短吗
<李>应该换成多行吗?如果是,最多可以换行多少行吗?
这种情况下单词比预期的多,但是当单词太长时会发生什么呢?默认情况下,它将溢出其容器。
作为专业前端开发人员,重要的是要确定在这种情况下应该要知道怎么处理。幸运的是,有一些CSS属性就是专门用于解决此类问题。
除此之外,问题不仅在于长内容,短内容也会破坏UI,或者至少会让它看起来很奇怪。如下面的示例
带有<代码>好>
在这种情况下我们该怎么办?也许在按钮上设置<代码> min-width>
<强>长内容
在,大家已经对问题有所了解,我们接着深入研究CSS技巧,这些技巧可为处理长内容提供解决方案。
<强> overflow-wrap
CSS属性<代码> overflow-wrap>
<强>连字符
CSS属性<代码>连字符告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。
<强>文本截断处理
截断是指在句子的末尾添加点,以表明有更多的文本内容。
没有<代码>文本截断属性或其他属性,但是它混合了一些CSS属性,可以为我们完成工作。
<>强多行文本截断处理
如果要截断多个行,可以使用<代码> line-clamp 属性。
要让这种工作，必须使用display: -webkit-box。-webkit-line-clamp指定截断工作的最大行数。
这种技巧的缺点是，如果要为元素添加padding，它很容易失败。当添加padding时，会导致显示下一行的一部分，这本应该要被截断的。见下图：
