CSS text beyond the prompt effect

There is such a small detail in mac file management.

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

A very subtle but very humane details (ps. Can totally see it does not need to prompt the 😘). In fact, this kind of effect can be easily achieved in the web through simple CSS. Let's take a look~

One, CSS implementation ideas

I believe everyone knows title . The original prompt uses this. It can be said that it has been supported since the ancient century. The following is an introduction to this attribute on MDN

title global attribute contains the text that represents the consultation information and is related to the element it belongs to. This information usually exists, but it is never necessary, and is shown to the user as a reminder

Usage is also very simple

<p  class="txt" title="这是absolute">元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
</p>

The presentation style and stay time of the title here are related to the operating system and browser, and cannot be modified.

Now the problem is that the title attribute is pre-added, and it is impossible to control whether to display or not through styles. Then, how does the ? Then look down

Although CSS cannot dynamically change the title attribute, another way of thinking, if there are two copies of the same text, one of them title 160ae7ea077ab4, such as

<p class="wrap">
  <span class="txt">元素会被移出正常文档流，并不为元素预留</span>
  <span class="title" title="元素会被移出正常文档流，并不为元素预留">元素会被移出正常文档流，并不为元素预留</span>
</p>

For the convenience of demonstration, add a background color to the text title text A and text B (the following applies), as shown below

Now only need single line of text show when text A , multi-line text time show text B , we can achieve the desired functionality.

So, how to determine whether the text line beyond it ?

Second, multi-line text judgment

First, when the text exceeds one line, the will inevitably change (😂), assuming the line height is 1.5, then 1 line of text is 1.5em, 2 lines is 3em, and so on...

However, if we limit the maximum height of A to two rows , then one row and multiple rows are not distinguished (the height of a single row is 1.5em, and the height of multiple rows is 3em)

.txt{
  display: block;
  max-height: 3em;/*最大高度为2行*/
}

Now the key step is coming, the text B up by a distance of 2 lines , here is achieved by relative positioning (margin is also possible)

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

Is it a bit strange? In fact, upward displacement distance 2 line , so text A one-line time, text B to just " out of bounds" up; in text A when multiple lines, due to the high Only 2 rows height, text B just "covering" above, the principle is as follows

At this time, if the height of the parent is limited to one line, and text B truncated in a single line

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

In this way, when there are multiple lines, what you see in the field of view is text B , and the effect is as follows

Finally, the parent is beyond hidden, and text B background is set to the same color as the parent~

So far, the effect shown at the beginning of the article has been achieved, the complete code can be viewed codepen auto title (remember to put the mouse on o~)

For a more convenient and intuitive demonstration, a similar list is made as follows

For online examples, please visit codepen auto title list (remember to put the mouse on o~)

3. Other practical cases

Here are two more practical prompt effects

1. Omission effect

Careful friends may have discovered that when the text at the beginning of the article exceeds, the ellipsis is middle of .

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

When the width is smaller, it appeared at the end of the ellipsis, which is very embarrassing, because the front is the same , glance can not tell exactly what the file name with which (😵)

If the ellipsis is in the middle, it is easy to distinguish. So, how to achieve this effect?

With the above layout, all the analyses below only need to text B . Regarding the effect of omission in the middle, there is currently no special CSS style that can be achieved, but it can be simulated, and then look down

First, copy a copy of the text, here use ::before pseudo-class generated content

.title::before{
    content: attr(title);
}

Obviously, at this time the two paragraphs of text are connected together

Then, :before set the width to 50%

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

Next, :before beyond the cutoff

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

Finally, replace :before with the effect of the ellipsis in front. You can use direction achieve. Regarding direction , there may not be much contact at ordinary times. In fact, it is to change the layout direction. The default is from left to right, and the ellipsis is on the right. , If you change it from right to left, then the ellipsis will also be on the left, so

.title::before{
    /**/
    direction: rtl; /*从右到左*/
}

Let's see the finished effect now

There is a small problem, the gap on the left of the ellipsis in the middle is sometimes a bit big, as follows

This is because this place just wraps up, so a small section is left empty. Here you can simply optimize it with justified text

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

This will ensure that the rightmost text is to the right (of course the text gap will be slightly increased~), the effect is as follows

For online examples, please visit codepen auto middle ellipsis (remember to put the mouse on o~)

1. Beyond scrolling effect

Sometimes, the title prompt may be a bit weak and not obvious enough. When the product needs to exceed the text, the mouse can be automatically scrolled up when the mouse is placed, similar to this effect

How to achieve it? In fact, with the above layout, the implementation here is very easy. You only need to do scrolling animation text B CSS3 to achieve seamless scrolling, here to introduce the implementation:

To achieve seamless scrolling, you first need to copy the same text, here ::after pseudo-element is generated content

.title::after{
    content: attr(data-title);/*复制一份文本，下图绿色的部分*/
}

Now it needs to be displayed on one line without wrapping

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

As you can see, although there is no line break, the width is still the width of the parent and does not follow the text content. At this time, you can set display: inline-block

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

Regarding the width following the text content, in fact, you can also use width: max-content achieve, the compatibility is slightly worse

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

Next, a Animation animation can, only when Transform displaced to own half% 50 when rapid homing , can achieve seamless effect, the following

.title:hover{
    /**/
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /*位移到 50% 时 迅速归位*/
    }
}

The gap between the beginning and the end here is realized by padding

.title::after{
    content: attr(data-title);
    padding: 0 5em;/*无缝滚动的首位间隙*/
}

For online examples, please visit codepen auto scroll list (remember to put the mouse on o~)

The only flaw is that the animation time is fixed, if the text is very long, there may be a problem of scrolling too fast

Four, summary and explanation

This article introduces a new way of automatically judging multi-line text with CSS, and brings 3 personalized small interactions. In general, I didn't actually use too many skills (mainly imagination), the structure is not too complicated, I believe it will not be difficult to look at it step by step.

The focus is still on the layout above, the layout is out, and many of the expansion effects below will be solved. Since only CSS2 related features (max-height, text truncation, etc.) are used, the compatibility is also great. The actual test can be compatible with IE7+ (full compatibility, use with confidence) , and the subsequent over-scrolling effect is compatible with IE10+ , now summarize the implementation key points:

1. Change ideas, node replication is a good way
2. Through max-height single line and multiple lines can be judged
3. Flexible use of CSS blindfold method level coverage and beyond hiding
4. direction: rtl can achieve the effect of leading ellipsis
5. The middle ellipsis can be simulated by splicing two paragraphs of text
6. Width following text adaptation can be achieved with inline-block
7. The seamless scrolling effect can be achieved with a displacement of -50%

Well, such a low-cost, very user-friendly small function, quickly use it. If you think it’s good, please like, bookmark and forward ❤❤❤~