作者：shaded译者：前端小智来源：ishadeed点赞再看，微信搜索【大千世界】，B站关注【前端小智】此人没有大厂背景，而是有着积极的心态。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...我们在使用CSS构建布局的时候，重要的是要考虑长文本内容和短文本内容。如果你能清楚地知道当文本长度发生变化时应该做什么，就可以避免很多不必要的问题。在许多情况下，添加或删除一个词会改变UI的外观，更糟糕的是，它会破坏原始设计，使其无法访问。在我学习CSS的早期，我低估了添加或删除单词的力量。在本文中，我将介绍几种不同的技术，您可以立即使用它们来处理CSS中不同长度的文本。问题在讨论处理文本内容的技术之前，让我们先解释一下这个问题，假设我们有一个垂直导航。名称的长度可能会有所不同，尤其是当您在多语言网站上工作时。在上面的示例中，随着名称变长，它被换行到第二行。这里有一些问题。这段文字应该被截断吗？是否应该做成多行？如果是，最多可以换行多少行？这种情况下的单词比预期的要多，但是当单词太长时会发生什么？默认情况下，它会溢出其容器。作为一名专业的前端开发人员，重要的是要确定在这种情况下该怎么做。幸运的是，有一些CSS属性旨在解决此类问题。除此之外，问题不仅在于长内容，短内容也会破坏UI，或者至少让它看起来很奇怪。就像下面的例子一样，带有ok文本的按钮的宽度非常小。我并不是说这是一个致命的问题，但它会使按钮看起来很脆弱或很难被注意到。遇到这种情况怎么办？也许在按钮上设置最小宽度？无论内容长度如何，都提供安全宽度。长内容来了，现在您知道了问题所在，让我们深入研究可以为处理长内容提供解决方案的CSS技巧。overflow-wrapCSS属性overflow-wrap用于指示浏览器是否允许此类单词换行，以防止未分割的字符串太长而无法填满其换行符时溢出。HyphensCSS属性hyphens告诉浏览器如何在换行时对单词进行连字。可以完全阻止连字符的使用，控制浏览器何时使用它们，或者让浏览器决定何时使用它们。.element{hyphens:auto;}文本截断处理截断是指在句子末尾添加点号，表示文本内容较多。没有文本截断属性或任何东西，但它是一些CSS属性的组合，可以为我们完成这项工作。.element{空白：nowrap;溢出：隐藏；text-overflow:ellipsis;}多行文本截断处理如果要截断多行，可以使用line-clamp属性。.element{显示：-webkit-box；-webkit-line-clamp:3;-webkit-box-orient：垂直；overflow:hidden;}为此，必须使用display:-webkit-box。-webkit-line-clamp指定截断工作的最大行数。这个技巧的缺点是，如果您想向元素添加填充，它很容易失败。添加填充时，会导致显示下一行的一部分，应该将其截断。见下图：水平滚动有时，截断或连接一个词并不总是可行的。例如，当一个长单词被换行替换时，JavaScript代码会变得难以阅读。在这种情况下，水平滚动会带来更好的阅读体验。填充在某些情况下，人们可能会忘记添加填充，直到我们注意到视觉问题。考虑以下问题：这是一个复选框列表，其中有一个非常接近它的同级项。发生这种情况是因为网格上没有间距。这是Techcrunch网站上的真实示例。短内容这不是每个人都常见的，但它也是设计和构建UI时的重要考虑因素。设置最小宽度回到我在本文开头向您展示的示例。我们如何增强它并使按钮看起来更好？我们可以通过向按钮添加一个最小宽度来解决这个问题，这样它就不会低于该宽度。现在您对问题及其解决方案有了一些了解，让我们从网络上探索一些用例和示例。用例和示例个人资料卡这是长内容的常见示例。很难预测名字的长度。我们应该如何应对？/*方案一*/.card__title{text-overflow:ellipsis;空白：nowrap；overflow:hidden;}/*方案2*/.card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient：垂直；overflow:hidden;}在处理多语言布局时，导航项的内容长度会发生变化。考虑以下示例，其中LTR（从左到右）导航项关于大于RTL（从右到左）导航项。在RTL中，项目看起来太小了。太小的可点击区域不利于用户体验。我们可以做什么？在这种情况下，最好为导航项设置一个最小宽度。.nav__item{min-width:50px;}文章内容长词或链接很常见，尤其是在移动设备上。考虑以下上面有一个长单词的情况，它会溢出容器导致水平滚动。我们可以通过使用overflow-wrap或连字符来解决这个问题。.article-contentp{overflow-wrap:break-word;}购物车产品名称可以从一个词到多行不等。在这种情况下，产品名称太靠近删除按钮，因为它们之间没有添加足够的间距。这个方案可以通过添加padding或者margin来实现，根据你的上下文，为了简单，这里使用margin的方案。.product__name{margin-right:1rem;}Flexbox和长内容Flexbox和长内容会发生某种行为，导致元素溢出其父元素。考虑以下示例：html
