在CSS中处理短和长的内容

Your new development career awaits. Check out the latest listings.ads via Carbon

When you build a layout in CSS, it’s important to account for and test short and long text content. Having a clear idea of what to do when the text varies in length can prevent a lot of unwanted issues.

当你在CSS中建立一个布局时，考虑并测试短和长的文本内容是很重要的。清楚地知道当文本的长度不同时应该怎么做，可以避免很多不必要的问题。

There are many situations where adding or removing one word can change how a design looks, or even worse, it can break it and make it inaccessible. In my early days of learning CSS, I underestimated what adding or removing a word can do. In this article, I will go through the different techniques that you can use right away to handle different text lengths in CSS.

在很多情况下，添加或删除一个词就可以改变设计的外观，甚至更糟糕的是，它可以破坏设计，使其无法使用。在我学习CSS的早期，我低估了添加或删除一个字的作用。在这篇文章中，我将介绍一下你可以马上用来处理CSS中不同文本长度的不同技术。

The problem

问题所在

Before going into the techniques to handle text content, let me shed the light on the problem first. Let’s suppose that we have a vertical navigation.

在讨论处理文本内容的技术之前，让我先说明一下这个问题。让我们假设我们有一个垂直导航。

Names length can vary, especially if you are working on a multilingual website. In the example above, the name is wrapped into a second line as it becomes longer. Here are some questions:

名字的长度可以不同，特别是当你在一个多语言网站上工作时。在上面的例子中，随着名字变长，它被包裹到第二行。这里有一些问题：

Should we truncate the text?
我们应该截断文本吗？
Should we wrap into multiple lines? If yes, what’s the maximum number of lines to wrap?
我们应该包成多行吗？如果是的话，最多可以绕成多少行？

That’s the case with more words than expected, but what happens when a word is too long? By default, it will overflow its container.

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

As a front-end developer, it’s important to decide on what should happen in such cases. Luckily, there are some CSS properties that were designed just for solving such problems.

作为一个前端开发者，决定在这种情况下应该发生什么很重要。幸运的是，有一些CSS属性就是为解决此类问题而设计的。

Adding on that, the problem is not only about long content, but also short content can break a UI, or make it look weird, at least. See the example below:

在...