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

做者：shadeed 译者：前端小智 来源：ishadeed

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

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：github.com/qq449245884…

当咱们使用 CSS 构建布局时，考虑长短文本内容很重要，若是能清楚地知道当文本长度变化时须要怎么处理，能够避免不少没必要要的问题。

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

问题

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

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

• 应该把这段文字截短吗

• 应该换成多行吗？ 若是是，最多能够换行多少行？

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

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

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

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

在这种状况下咱们该怎么办？ 也许在按钮上设置min-width？ 不管内容长度如何，均可以提供安全的宽度。

长内容

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

overflow-wrap

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

Hyphens

CSS 属性 hyphens 告知浏览器在换行时如何使用连字符链接单词。能够彻底阻止使用连字符，也能够控制浏览器何时使用，或者让浏览器决定何时使用。

.element {
  hyphens: auto;
}
复制代码

文本截断处理

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

没有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指定截断工做的最大行数。

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

水平滚动

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

Padding

在某些状况下，你们可能会忘记添加padding，直到咱们注意到一个视觉问题。考虑如下问题：

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

短内容

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

设置一个最小宽度

回到本文开头向你们展现的一个示例。 咱们要如何加强它并使按钮看起来更好？

咱们能够经过在按钮上添加min-width来解决此问题，这样一来，它就不会低于该宽度。

如今你们已经对问题及其解决方案有了必定的了解，咱们来探索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;
}
复制代码

导航项

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

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

.nav__item {
  min-width: 50px;
}
复制代码

文章内容

一个长词或一个连接是很常见的，尤为是在手机上。考虑如下

上面有一个很长的单词，它会上容器溢出致使水平滚动。咱们能够经过使用overflow-wrap或hyphens来解决这个问题。

.article-content p {
  overflow-wrap: break-word;
}
复制代码

购物车

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

这个解决方案能够经过添加padding或margin来实现，这取决于大家的上下文，为了简单起见，这里使用margin解决方案。

.product__name {
  margin-right: 1rem;
}
复制代码

Flexbox和长内容

flexbox
复制代码

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

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;
}
复制代码

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

缘由是 flex 项不会收缩到其最小内容大小如下。为了解决这个问题，咱们须要在flex项目.user__meta上设置min-width: 0。

.user__meta {
  /* other styles */
  min-width: 0;
}
复制代码

总结

我但愿智米们已经学会了处理CSS中短内容和长内容的不一样技巧。我很喜欢这篇文章，由于它帮助我记住了一些小细节，这对将来的项目会颇有帮助。

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

---

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

原文：isheed.com/article/css…

交流

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