Shadows appear instead of the block being cut off. How to use CSS to trim long text. What are we afraid of?

Vlad Merzhevich

Regardless of the fact that monitors of large diagonals are becoming more and more accessible, and their availability is steadily growing, however, there is a problem in the limited space to accommodate a lot of text. For example, it may be needed for a mobile version of a site or for an interface in which the number of rows is important. In situations like this, there is a sense of cutting off long rows of text, depriving only the beginning of the proposition. This way we will bring the interface to a compact form and quickly use the displayed information. The cutting of rows itself can be done on the server side using the same PHP, or through CSS in a simpler way, and you can now display the entire text, for example, when the mouse is hovered over a new cursor. Next, we’ll look at methods for cutting text with straight scissors.

In reality, it all comes down to the power of overflow from hidden values. The significance is no longer evident in the various representations of our text.

vikoristamo overflow

In order for the power of overflow to show itself with the text in all its beauty, it is necessary to transfer the text to the additional white-space from the values ​​of nowrap. If this is not done, then the effect we need will not be created; transfers will be added to the text and the entire text will be displayed. Exhibit 1 shows how to trim long text using a set of style guidelines.

Example 1. overflow for text

HTML5 CSS3 IE Cr Op Sa Fx

The result of the readings given to the butt in Fig. 1.

Small 1. View of the text after the cessation of power overflow

As you can see from the little one, there’s only one short story - it’s not obvious that the text can be continued, so there’s a need for a date to understand the truth. For this purpose, a gradient or three speckles are needed.

Adding a gradient to the text

To make it clearer that the right-handed text will not end, you can lay a gradient on top of it from the clear color to the background color (Fig. 2). In this case, the effect of step-by-step destruction of the text will occur.

Small 2. Text with gradient

Application 2 shows the creation effect. The style of the element itself will practically be redundant, but the gradient itself will be added using the additional pseudo-element ::after and CSS3. For this purpose, an empty pseudo-element is inserted through the content power and a gradient with different prefixes for major browsers is added (example 2). The width of the gradient can be easily changed using width, and you can also adjust the degree of visibility by replacing the value of 0.2 with your own.

Example 2. Gradient over text

HTML5 CSS3 IE 8 IE 9 + Cr Op Sa Fx

An internal discrete arpeggio transforms a polyrow, which results in a simultaneous vertical in a super-polyphonic polyphonic fabric.

This method does not work in the browser Internet Explorer up to version 8.0 inclusive, since there is no gradient support in it. Alternatively, you can use CSS3 and create a gradient the old way, using an image in PNG-24 format.

This method works only with a plain background and at any time background picture the gradient on top of the text will catch your eye.

Three specks at the end of the text

To replace the gradient at the end of the cropped text, you can also add three dots. Moreover, you will be automatically supplied with additional power text-overflow. This means all browsers, including older versions of IE, and the only part of this power is its still unclear status. It's important to enter into CSS3, otherwise the code with it will not pass validation.

Exhibit 3 shows the stagnation of text-overflow power from the ellipsis values, which adds three spots. When you hover your mouse over the text, it is displayed in its entirety and highlighted with a background color.

Example 3. Wikostannya text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

The result of the readings given to the butt in Fig. 3.

Small 3. Text with three dots

The great advantage of these methods is that the gradient and three dots are not displayed when the text is short and fits entirely into the specified area. So the text will appear as if it is completely visible on the screen and will be cut off when the width of the element is changed.

Є the text of the day that needs to be displayed in the middle of a block of fixed height and width. In this case, when the text is placed in a full text, a fragment of the text that is completely placed in the task block is displayed, after which three dots are inserted.

Such a mystery remains widespread, but at the same time it is not as obvious as it appears.

Option for one-line text in CSS

In this way, you can vikorystvuvat power text-overflow: ellipsis. In this case, the container is to blame for mother power overflow Rivne hidden or else clip

Block (width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;)

Option for rich text in CSS

The first way to trim long-line text is Wikoristanny CSS authorities stagnated and pseudo-elements :beforeі :after. For starters HTML layout

And now the authorities themselves

Box (overflow: hidden; height: 200px; width: 300px; line-height: 25px;) .box: before (content: ""; float: left; width: 5px; height: 200px;).box> *: first -child(float: right; width: 100%; margin-left: -5px;).box: after(content: "\02026"; box-sizing: content-box; float: right; position: relative; top: -25px; width: 3em; padding-right: 5px; background-size: 100% (255, 255, 255, 0), white 50%, white);)

Another way is to use the column-width value to set the column width for large-row text. True, if you choose this method, you won’t be able to insert three specks into the ends. HTML:

Block (overflow: hidden; height: 200px; width: 300px;).block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; height: 100%;)

The third method for solving rich text in CSS for browsers Webkit. We will have to compete with a number of specific authorities with a prefix -webkit. Basically -webkit-line-clamp allows you to specify the number of entries in the row block. It is better to decide to share your work in the same group of browsers

Block (overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;)

Option for rich text in JavaScript

Here an additional invisible block is created, in which our text is placed, after which it is removed one character at a time until the height of the block becomes less or equal to the height of the required block. And at the end the text moves to the output block.

var block = document. querySelector(".block"), text = block. innerHTML, clone = document. createElement("div"); clone. style. position = "absolute"; clone. style. visibility = "hidden"; clone. style. width = block. clientWidth + "px"; clone. innerHTML = text; document. body. appendChild(clone); var l = text. length - 1; for (; l> = 0 && clone. clientHeight> block. clientHeight; - l) (clone. innerHTML = text. substring (0, l) + "...";) block. innerHTML = clone. innerHTML;

This is what the plugin for jQuery looks like:

(Function ($) (var truncate = function (el) (var text = el. Text(), height = el. Height(), clone = el. Clone()); clone. Css ((position: "absolute", visibility: "hidden", height: "auto")); el. after (clone. length - 1; for (; l> = 0 && clone. height; - l) clone. text (text. substring (0, l));) el. text (clone. remove()); $. truncateText () return this.each(function()(truncate($(this));)););) (jQuery));

This article lets you know about 3 Quick and Simple CSS Techniques, How can you vikorystvovat to show only part of the picture on your page.

All the methods used here actually require only a couple of rows CSS code. However, this is not circumcision in the direct sense of the word ( CSS We can’t create anything yet), we simply invite and show only that part of the picture that we want to see.

These methods can be even more complex if you want to bring the image to the specified size, or if you want to create, for example, thumbnails (a modified copy of the image) in the new section or something similar.

Technique 1 - vikoristannya of negative fields ( Negative Margins)

Since you don’t want to vikorize negative fields, we propose to vikorist the technique №2 . It includes a batka (paragraph), which has width and height. This paragraph has power position set as relative. Width and height specify the size of the rendered field. And the image placed in the middle of the paragraph is power position set to absolute. Then we can get help from the authorities topі left Spread the picture as you wish, in the process meaning: which part of the image is shown, and which part - not.

HTML Identical to the code from advanced technology:

Technique 3 - vykoristannya power of cutting ( Clip Property)

This technology is guilty of being too light, since clip property means a part of an element that needs to be shown. It sounds like a thorough decision, but it is one ironwork: clipped element absolutely guilty of taking a stand. In order to be able to select an element, we have to add an additional element, calculate the size of the visible area of ​​the image, add this size to the father, let the father go... Kupa robots, what's wrong?

Oh, one more problem: the size of the trimmed element does not change to the size of the crop, but is lost to the cob size (the picture behind the edges of the crop is simply missing). We must vikoristuvat absolute positioning, so as to collapse the visible area into the upper left corner of the father.

However, it is impossible to deprive the pose of the guessed power of cutting. And this is how I know the code...

Adding three dots at the end of the text can be done using the same methods, using css and js.

To get started, let's get to the bottom of things. Є marking the block

Now you need to achieve the effect of cutting off the text in the skin element of the list, in addition to which you need to add three dots.

Trimming text css

For whom we create style for class tit
.tit(
white-space: nowrap; / * Scanate transfer to text * /
overflow: hidden; / * Trimmed to fit * /
padding: 5px; /*Fields*/
text-overflow: ellipsis; / * Three specks * /
}

The peculiarity of this decision lies in the fact that if the text fits into the size of the block, then there will be no additions. The cherries will never be forgotten.

Most often it is necessary to trim the text at the end of the day and only after adding a point.
The details are also sharpened if it is necessary to add a point at any time (no matter what kind of text, even 3 letters). And if the text has reached the size of a song, then it needs to be trimmed. For this reason, it is necessary to vikorize scripts.

We cut off the text for a number of characters and add three boxes independently of each other

What are we afraid of?

We tell the script which elements themselves need to be processed.
For what's in a row var elem = document.getElementsByClassName("tit"); The class of the element is indicated (it is the fault but the new one).

Then you need to set the size of the text before cropping. All our short lines will be completed with three speckles. This is indicated by the change var size = 75;

Now the script must go through all the elements with the required class and put down the marks.
The script checks the dowzhin of the skin row and trims the text if it exceeds 75 characters. If the dovzhin is smaller, then three dots are simply added (the row if (elem [i].innerHTML.length> size)).

You can marvel at how the script works demo pages. That's all, now you know how to trim long text using different methods.