HTML text exceeds the horizontal scroll bar and displaying three dots

This time we want to say is this: There are a lot of companies and a lot of app software two methods frequently used horizontal scroll bar and the text exceeds three dots

Horizontal scroll bar : Well the name suggests, can be a content that can slide sideways.

Text exceeds three dots : When the text content of the text is exceeded beyond our predetermined width of the box, will be replaced by redundant text hidden display dot i.

You just write a simple horizontal scroll bar example, we look at the code

html part:

<div class="top">
     <div class="box_top">
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span> 
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
     </div>
</div>

css section:

.box_top{
                width: 100%;
                height: 2rem;
                background: green;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                box-sizing: border-box;
                overflow-x: auto;
                white-space:nowrap;
            }
            .box_top span{
                background: pink;
                display: inline-block;
                width: 1rem;
                height: 2rem;
                text-align: center;
                vertical-align: middle;
            }

In fact, the horizontal scroll bar principle is very simple to outer box is a fixed width, when the contents of the box exceeds the width of the box, let it scroll bar appears on it we should pay attention to the key points:

1, the first point is that we must be in the outer box to set the time you want to set the css style if exceeded, then how to display the scroll bar is overflow-x (x-axis scroll bars) overflow-y (y-axis scroll bars ) you have to figure out what they need to display a scroll bar.

2, the second point is that we need to have the contents of the box in his show, do not let the contents wrap, these css styles above all, do not let the content is wrapped white-space: nowrap, the content displayed in a row text- align: center.

3, can be used to scroll beyond the scroll overflow: auto can also use the overflow: scroll

Here we look at three examples of small dots exceeds displayed text:

I li define a fixed width exceeds displayed long after the three dots in the css styles are also added to the Notes, is very clear.

Then we completed the text scroll horizontally and exceeds displayed three small dots of these two functions.

Finally: sincerely hope this article can help to you are watching, if you can not understand or communicate thanks vulnerable in the comments.