Author: Shahadeed

Click “like” to see, wechat search ** [big move the world],B station pay attention to [front-end small wisdom] ** this does not have a big factory background, but has a positive attitude. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

When building a layout with CSS, it’s important to consider long and short text content, and you can avoid a lot of unnecessary problems if you have a clear idea of what to do when the text length changes.

In many cases, adding or removing a word changes the look of the UI, or worse, it can break the original design and make it inaccessible. In the early days of my CSS studies, I underestimated the power of adding or removing a word. In this article, I’ll introduce a few different techniques that smart people can use immediately to work with text of varying lengths in CSS.

The problem

To explain this before we discuss techniques for manipulating text content, assume that we have a vertical navigation.

The length of your name can vary, especially if you work on a multilingual site. In the example above, as the name gets longer, it is wrapped to the second line. There are some problems here

  • Should I cut this paragraph short

  • Should it be multiple lines? If so, what is the maximum number of newlines?

There are more words than expected in this case, but what happens when the words are too long? By default, it will overflow its container.

As a professional front-end developer, it’s important to make sure you know what to do in this situation. Fortunately, there are some CSS properties that are specifically designed to solve this problem.

Beyond that, the problem isn’t just long content; short content can also break the UI, or at least make it look weird. Here is an example

Buttons with OK text are very small in width. I’m not saying this is a fatal problem, but it can make buttons look weak or hard to notice.

What should we do in this case? Maybe set min-width on the button? It provides a safe width regardless of the length of the content.

Long content

Now that you have an idea of the problem, let’s delve into CSS techniques that provide solutions for dealing with long content.

overflow-wrap

The CSS overflow-wrap attribute specifies whether browsers allow word breaks to prevent overflow when an unbreakable string is too long to fill its wrapper.

Hyphens

The CSS property still tells the browser how to use a hyphen to connect words when moving to a line break. You can block the hyphen completely, control when the browser uses it, or let the browser decide when to use it.

.element {
  hyphens: auto;
}
Copy the code

Text truncation

Truncation is the addition of dots at the end of a sentence to indicate that there is more text.

There’s no text-truncation property or anything else, but it’s a mix of CSS properties that do the job for us.

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Copy the code

Multi-line text truncation processing

If you want to truncate multiple rows, you can use the Line-clamp property.

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Copy the code

For this to work, you must use display: -webkit-box. -webkit-line-clamp Specifies the maximum number of lines for truncation work.

The downside of this technique is that it’s easy to fail if you want to add padding to an element. When padding is added, it causes a portion of the next line to be displayed, which should be truncated. See below:

Horizontal scrolling

Sometimes it is not always possible to truncate or join a word. For example, JavaScript code can become difficult to read when a long word is replaced with a new line. In this case, horizontal scrolling will make the reading experience better.

Padding

In some cases, you might forget to add padding until you notice a visual problem. Consider the following questions:

Here is a list of check boxes with a sibling that is very close to it. This happens because there is no spacing on the grid. Here’s a real-life example from Techcrunch.

Short content

This isn’t common, but it’s an important consideration when designing and building a UI.

Set a minimum width

Back to the example I showed you at the beginning of this article. How can we enhance it and make the button look better?

We can solve this problem by adding min-width to the button so that it does not fall below that width.

Now that you have a sense of the problem and its solution, let’s explore some use cases and examples from the Web.

Use cases and examples

Personal Information card

This is a common example of long content. It is difficult to predict the length of a name. What should we do about it?

/* scheme 1 */. Card__title {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* scheme 2 */. Card__title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }Copy the code

Navigation items

Content length changes when working with multilingual layouts. Consider the following example

LTR(left to right) has a larger navigation item About than RTL(right to left). In RTL, projects seem too small. The clickable area is too small for the user experience. What can we do? In this case, it is best to set a minimum width for the navigation item.

.nav__item {
  min-width: 50px;
}
Copy the code

The article content

A long word or a link is common, especially on mobile phones. Consider the following

It has a long word on it that will overflow the container and cause horizontal scrolling. We can get rid of this problem by using overflow-wrap or 登 记.

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

The shopping cart

Product names can range from one word to multiple lines. In this case, the product name is too close to the delete button because you didn’t add enough space between them.

This solution can be implemented by adding padding or margin, depending on your context, but for simplicity, the margin solution is used here.

.product__name {
  margin-right: 1rem;
}
Copy the code

Flexbox and long content

flexbox
Copy the code

And long content will behave in a way that causes the element to overflow its parent. Consider the following example:

html

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

css

.user {
  display: flex;
  align-items: flex-start;
}

.user__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
Copy the code

However, this doesn’t work when the content is long. The text will overflow its parent file.

The reason is that flex entries do not shrink below their minimum content size. To solve this problem, we need to set min-width: 0 on the Flex project. User__meta.

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

conclusion

I hope you’ve learned the different techniques for dealing with short and long content in CSS. I like this article because it helps me remember small details that will be helpful for future projects.

End ~ I’m wisdom, and we’ll see you next time ~

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: isheed.com/article/css…

communication

This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.