There’s a little detail in MAC file management.

1. When the file name does not exceed one line, it is displayed completely and no prompt is displayed when the mouse pointer is placed on it
2. When the file name exceeds one line, an ellipsis appears. At this time, the mouse is placed to prompt the complete file name

A subtle but very human detail (the ps. Can be fully seen without prompting 😘). In fact, this kind of effect can be easily achieved on the Web with simple CSS. Take a look below

1. CSS implementation

I believe you all know the title attribute, the native hint to use this, can be said from the ancient centuries began to support, the following is the MDN on the introduction of this attribute

The title global attribute contains text that represents the query information and is related to the element to which it belongs. This information is usually present, but never necessary, as a prompt to the user

It’s also very simple to use

<p class="txt" title="It's absolute">Elements are moved out of the normal document flow, with no space reserved for them, and are located by specifying an element offset from the nearest non-static location ancestor. Absolutely located elements can be set to margins and do not merge with other margins.</p>
Copy the code

The presentation style and duration of title are operating system – and browser-dependent and cannot be modified

Now the problem is that the title property is pre-added and there is no style control over whether it is displayed or not, so how does CSS do dynamic processing?

Although CSS cannot dynamically change the title property, another way to think about it is if you have two copies of the same text, and one of them has the title property, for example

<p class="wrap">
  <span class="txt">Elements are moved out of the normal document flow and are not reserved for elements</span>
  <span class="title" title="Elements are removed from the normal document flow and are not reserved for elements.">Elements are moved out of the normal document flow and are not reserved for elements</span>
</p>
Copy the code

For illustrative purposes, give the text with the title attribute A background color, and let’s call it text A and text B (if applicable), as shown below

Now we just need to control how to present text A for single lines of text, and text B for multiple lines of text, and we can do what we want.

So how do you tell if the text is longer than one line?

Two, multi-line text judgment

First, when the text exceeds one line, the height must change (😂), assuming that the line height is 1.5, then 1 line of text is 1.5EM, 2 lines are 3EM, and so on…

However, if we limit the maximum height of text A to two lines, wouldn’t one line be distinguished from multiple lines (single-line height is 1.5em, multi-line height is 3em)?

.txt{
  display: block;
  max-height: 3em;/* Maximum height is 2 rows */
}
Copy the code

Now the key step is to move the text B up 2 lines. This is done by using relative positioning.

.title{
  position: relative;
  top: -3em; 
}
Copy the code

Isn’t that a little weird? In fact, it has shifted up by 2 lines, so that if text A is only one line, text B is just “out”; When text A has more than one line, text B just “overwrites” it. The principle is shown as follows

In this case, if the parent height is limited to one line, and the text B is single-line truncated

.wrap{
    line-height: 1.5;
    height: 1.5 em;
}
.title{
    position: relative;
    top: -3em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
Copy the code

In this way, when you have multiple lines, you will see text B in the field, which will look like this

Finally, set the parent to the same color as the parent and the text B background

At this point, you have achieved the effect shown at the beginning of this article. The full code can be viewed in codepen Auto Title (remember to mouse on o~).

For a more intuitive demonstration, a similar list is made below

An online example is available at codepen Auto Title list (remember to mouse over o~)

3. Other practical cases

Here are two more useful hints

1. Middle ellipsis effect

Careful friends may have noticed that the ellipsis is in the middle when the text at the beginning of the article is beyond.

What are the benefits of this design? For example, sometimes many files have the same name, only the suffix is different, or many have a version number. For example:

When the width is small, an ellipsis appears at the end of the file, which can be awkward because the front is the same, and it can be completely confusing at a glance (😵)

It’s easy to tell if the ellipsis is in the middle. So how do you achieve this effect?

With the help of the above layout, all of the following analysis only needs to be done with text B. There is no specific CSS style to implement the ellipsis effect, but you can emulate it. Read on

First, copy a copy of the text, which is generated by content using the ::before pseudo-element

.title::before{
    content: attr(title);
}
Copy the code

Obviously, at this point, the two paragraphs of text are connected

Then, set the right float for :before and set the width to 50%

.title::before{
    content: attr(title);
    width: 50%;
    float: right;
}
Copy the code

Next, set the beyond truncation to :before

.title::before{
    / * * /
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Copy the code

Finally, change the “before” to the “ellipsis” in front of the page, and you can use the “direction” to achieve the effect. In fact, you have to change the direction of the layout. The default is left to right, and the ellipsis is on the right

.title::before{
    / * * /
    direction: rtl; /* From right to left */
}
Copy the code

Now let’s see what it looks like

There’s a little bit of a problem, the space to the left of the ellipsis in the middle is sometimes a little big, as follows

This is because this is a line break, so I have a little bit of space. This can be simplified by using text alignment at both ends

.title{
    / * * /
    text-align: justify;
}
Copy the code

This will ensure that the right-most text is to the right (of course, the text gap will increase a little ~), which will have the following effect

Codepen Auto Middle Ellipsis (remember to put the mouse on o~)

2. Beyond the scrolling effect

Sometimes, the title hint can be a little weak and not obvious enough, and when the product needs more text, the mouse will automatically scroll over it, something like that

How does that work? In fact, with the help of the above layout, here is very easy to achieve, just need to do scroll animation on the text B, CSS3 to achieve seamless scrolling, here is to introduce the implementation:

To scroll seamlessly from beginning to end, you first need to copy the same text, which is generated by content using the ::after pseudo-element

.title::after{
    content: attr(data-title);/* Copy a copy of the text, the green part of the following image */
}
Copy the code

Now you need to display on one line, no line feeds

.title{
    / * * /
    white-space: nowrap;
}
Copy the code

As you can see, although there is no line feed, the width is still the parent’s width and does not follow the text. In this case, you can set display: inline-block

.title{
    / * * /
    display: inline-block;
    white-space: nowrap;
}
Copy the code

The width follows the text

Width: max-content: max-content: max-content: max-content

.title{
    /* display: inline-block; white-space: nowrap; * /
    width: max-content;
}
Copy the code

Finally, set the animation animation, just need to quickly return when the transform reaches 50% of itself, to achieve a seamless effect, as follows

.title:hover{
    / * * /
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /* Quickly return to position when displacement reaches 50% */}}Copy the code

The gap here is done by padding

.title::after{
    content: attr(data-title);
    padding: 0 5em;/* Seamless scrolling first gap */
}
Copy the code

For an online example, you can access codepen Auto Scroll list (remember to mouse over o~).

The only drawback is that the animation time is fixed, and if the text is very long, it can scroll too fast

Iv. Summary and explanation

This article introduces a new way to automatically judge multiple lines of text in CSS, and brings three user-friendly interactions. In general, there is not much skill (mainly imagination) involved, and the structure is not complicated. I believe it will not be very difficult to see step by step.

The focus is still on the layout of the above part, the layout out, the following many extension effects will be readily solved. Because only used CSS2 related features (max-height, text truncation, etc.), compatibility is also lolly, measured can be compatible to IE7+ (fully compatible, rest assured to use), the following beyond the scrolling effect compatible to IE10+, now summarize the implementation of key:

1. Switching ideas, node replication is a good idea
2. Single-row and multi-row can be determined by max-height
3. Flexible use of CSS camouflage layer covering and beyond hiding
4. Direction: RTL can achieve the effect of the leading ellipsis
5. The middle ellipsis can be simulated by concatenating two pieces of text
6. Width following text adaptation can be implemented with inline-block
7. The seamless rolling effect can be achieved with a displacement of -50%

Ok, such a low cost, and very human small function, hurry up to use. If you think it’s good, please like, favorit, and retweet ❤❤❤~