CSS中，如何处理短内容和长内容？

野性酷女 2022-10-27 01:46 139阅读 0赞

> 作者：shadeed  
> 译者：前端小智  
> 来源：ishadeed

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：https://github.com/qq449245884/vue-okr-tree**

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

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

## 问题 ##

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

![1e836756ee09d5623f595623247e9375.png][]

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

*  应该把这段文字截短吗
 *  应该换成多行吗？ 如果是，最多可以换行多少行？

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

![26c1ec6aea6d494188af53e3e55891ee.png][]

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

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

![462ff54ff2fa4ed66f224156bd6b643f.png][]

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

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

## 长内容 ##

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

#### overflow-wrap ####

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

![af55cd577182227753b41a1da90de79b.png][]

#### Hyphens ####

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

.element {
      hyphens: auto;
    }

![fdeb618463b4dfae49a65a74e1d5736b.png][]

#### 文本截断处理 ####

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

![b7eb65945a2f5f4e686d81295d542c7c.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`指定截断工作的最大行数。

![fc333cc4ee99a38a23eafc24d7484c27.png][]

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

![c672d5840bfb34ef83ec725d6c9677f1.png][]

#### 水平滚动 ####

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

![f9942d2d0727e5e88efcb464f954b528.png][]

#### Padding ####

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

![c2457c188515d21adaf961db6837d031.png][]

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

## 短内容 ##

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

#### 设置一个最小宽度 ####

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

![21fe8e090a964b8e3b72cd04076639d2.png][]

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

![c2e1c096f9adb34d3ef2092583bb73eb.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;
    }

#### 导航项 ####

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

![319a9309abead6362994fde3aeea7370.png][]

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

.nav__item {
      min-width: 50px;
    }

![5d381eebafc03708e24908ef86702fbd.png][]

#### 文章内容 ####

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

![988fb8720f6ac4be985742c061c6e227.png][]

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

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

#### 购物车 ####

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

![d3b342db5ebc91ba69bef849e9b5e28f.png][]

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

.product__name {
      margin-right: 1rem;
    }

#### Flexbox和长内容 ####

flexbox

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

![4a6d54f88750ee27c66845e125711eab.png][]

**html**

<div class="user">
      <div class="user__meta">
        <h3 class="user__name">Ahmad Shadeed</h3>
      </div>
      <button class="btn">Follow</button>
    </div>

**css**

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

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

![6416d83ab6fe51ba287161914b6edc05.png][]

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

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

![1b70e167ef3e67f8503741e44eafd9d5.png][]

## 总结 ##

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

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

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

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

## 交流 ##

文章每周持续更新，可以微信搜索 **【大迁世界 】** 第一时间阅读，回复 **【福利】** 有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[1e836756ee09d5623f595623247e9375.png]: /images/20221024/4bf30633d2704576bcfb85090866e37c.png
[26c1ec6aea6d494188af53e3e55891ee.png]: /images/20221024/edee8f4a6f6b400aa19ebf6a5f7e6d4f.png
[462ff54ff2fa4ed66f224156bd6b643f.png]: /images/20221024/22eac2113ecf42e290da8d7d1445e4f8.png
[af55cd577182227753b41a1da90de79b.png]: /images/20221024/2f7333bb9e964ebe8d8ec0b92c0fc46b.png
[fdeb618463b4dfae49a65a74e1d5736b.png]: /images/20221024/eb93c39d9bcf43e38b097907b9007f3c.png
[b7eb65945a2f5f4e686d81295d542c7c.png]: /images/20221024/0a5cb3643e194b668c811400ae6735d2.png
[fc333cc4ee99a38a23eafc24d7484c27.png]: /images/20221024/8ece21bd645a43a49eb0dc8bf3086156.png
[c672d5840bfb34ef83ec725d6c9677f1.png]: /images/20221024/414a78e6a05544d5b531c2680ac1b155.png
[f9942d2d0727e5e88efcb464f954b528.png]: /images/20221024/9954e713b6cb431487fafe293435833d.png
[c2457c188515d21adaf961db6837d031.png]: /images/20221024/29db3a1f6f7b43d082a3f9a8afb945f5.png
[21fe8e090a964b8e3b72cd04076639d2.png]: /images/20221024/b118c3602181408b8fe6a6056adf223c.png
[c2e1c096f9adb34d3ef2092583bb73eb.png]: /images/20221024/0a3069e196eb42789d42bbc8ec3772a2.png
[319a9309abead6362994fde3aeea7370.png]: /images/20221024/eddc1929f1b44e9cb65ee77c3d247341.png
[5d381eebafc03708e24908ef86702fbd.png]: /images/20221024/60964551997a4a509fd5e6445906028b.png
[988fb8720f6ac4be985742c061c6e227.png]: /images/20221024/b48ec6d0b4e4441b909603cdb30123c4.png
[d3b342db5ebc91ba69bef849e9b5e28f.png]: /images/20221024/7d72ac2afec5477094d1d304fb04536a.png
[4a6d54f88750ee27c66845e125711eab.png]: /images/20221024/386d03d68d84478c829c43791a182a00.png
[6416d83ab6fe51ba287161914b6edc05.png]: /images/20221024/cdb25d46c00d45bba7f61b97851ec34b.png
[1b70e167ef3e67f8503741e44eafd9d5.png]: /images/20221024/24d56d6675c945d0beae315c0f4271b5.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi