Css crop image. How to trim long text using CSS. Solution for multiline text

In this article we will tell you about 3 quick and simple methods CSS that you can use to show only part of the image on your page.

All the methods used here actually only require a couple of lines CSS code. However, this is not circumcision in the truest sense of the word ( CSS cannot do this yet), we simply hide and show only that part of the picture that we want to see.

These techniques can be very useful if you want to bring an image to a certain size, that is, you want to create, for example, a preview of it (a smaller copy of the image) in the news section or something similar.

If you don't feel like using negative margins, we suggest using technique #2. It includes a parent (paragraph) that has a specific width and height. This paragraph has the property positioning set to relative . Width and height define the dimensions of the displayed field. And a picture placed inside a paragraph has the property positioning set to absolute . Then we can use properties top And left arrange the picture however we want, in the process determining which part of the image to show and which not.

HTML identical to the code from the previous technique:

This technique should be the easiest, since clip property defines the part of the element that should be shown. This sounds like a perfect solution, but there is one catch: clipped element must be positioned absolutely. To be able to use the element, we will have to add an additional element, calculate the size of the visible area of ​​​​the image, add this size to the parent, use the parent... A lot of work, right?

Oh, one more problem: the size of the cropped element is not reduced to the crop size, but remains the original size (the picture outside the crop is simply hidden). We must use absolute positioning to move the visible area to the top left corner of the parent.

However, it cannot be left unmentioned slicing property. And so the code again...

Adding an ellipsis at the end of the text can be achieved in several ways, at our disposal css and js.

First, let's look at the problem. There is block marking

• A lot of interesting text about styles, layout, programming and many more interesting things about websites


• But how can we put an ellipsis if we cannot limit the block size?


• How about a js script? He can do this, right?


• Hmm, it definitely can. Here, keep the code, it will count Unicode characters and trim if necessary

Now you need to achieve the effect of cutting off the text in each list element, in addition to this you need to add an ellipsis.

To do this, let's create a style for the tit class
.tit (
white-space: nowrap; /* Cancel text wrapping */
overflow: hidden; /* Trim the contents */
padding: 5px; /* Fields */
text-overflow: ellipsis; /* Ellipsis */
}

The peculiarity of this solution is that if the text fits within the block size, then the ellipsis will not be added. Which is not always the solution to the problem.

Most often, you need to trim the text to its length and only then add points.
There are also tasks when it is necessary to add periods in any case (no matter how long the text is, at least 3 letters). And if the text is longer than a certain size, then it needs to be trimmed. In this case, it is necessary to use scripts.

function title() (
var elem, size, text;
var elem = document.getElementsByClassName("tit");
var text = elem.innerHTML;
var size = 75;
var n = 70;
for(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > size) (
text = elem[i].innerHTML.substr(0,n);
}
else(
text = elem[i].innerHTML;
}
elem[i].innerHTML = text + "...";
}
}
title();

We tell the script which elements need to be processed.
To do this, in the line var elem = document.getElementsByClassName("tit"); indicate the class of the element (it must be the same).

You then need to set the size of the text before cutting it. These are our short lines to which an ellipsis will be added. The variable var size = 75 is responsible for this;

Now the script should go through all elements with the required class and add an ellipsis.
The script checks the length of each line and truncates the text if it exceeds 75 characters. If the length is less, then an ellipsis is simply added (line if(elem[i].innerHTML.length > size)).

You can see the script in action on the demo page. That's all, now you know how to trim long text using various methods.

Vlad Merzhevich

Despite the fact that large diagonal monitors are becoming more affordable and their resolution is constantly increasing, sometimes the task arises of fitting a lot of text in a limited space. For example, this may be needed for mobile version site or for an interface in which the number of lines is important. In such cases, it makes sense to trim long lines of text, leaving only the beginning of the sentence. This way we will bring the interface to a compact form and reduce the amount of information displayed. The line trimming itself can be done on the server side using the same PHP, but it’s easier through CSS, and you can always show the entire text, for example, when you hover the mouse cursor over it. Next, we’ll look at methods for cutting text with imaginary scissors.

In reality, it all comes down to using the overflow property with the value hidden . The differences only lie in the different display of our text.

In order for the overflow property to show itself with text in all its glory, you need to unwrap the text using white-space with the value nowrap . If this is not done, then the effect we need will not occur; hyphens will be added to the text and the entire text will be displayed. Example 1 shows how to trim long text with a specified set of style properties.

Example 1. overflow for text

HTML5 CSS3 IE Cr Op Sa Fx

Text .size ( white-space: nowrap; /* Cancel text wrapping */ overflow: hidden; /* Crop content */ background: #fc0; /* Background color */ padding: 5px; /* Margins */ )

Result this example shown in Fig. 1.

Rice. 1. The appearance of the text after applying the overflow property

As can be seen from the figure, there is generally one drawback - it is not obvious that the text has a continuation, so the user must be made aware of this. This is usually done using a gradient or ellipsis.

To make it clearer that the text on the right does not end, you can overlay a gradient from a transparent color to the background color on top of it (Fig. 2). This will create the effect of a gradual dissolution of the text.

Rice. 2. Gradient text

Example 2 shows how to create this effect. The style of the element itself will remain practically the same, but we will add the gradient itself using the ::after pseudo-element and CSS3. To do this, we insert an empty pseudo-element through the content property and apply a gradient to it with different prefixes for major browsers (example 2). The width of the gradient can be easily changed using width , you can also adjust the degree of transparency by replacing the value 0.2 with your own.

Example 2: Gradient over text

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Text .size ( white-space: nowrap; /* Cancel text wrapping */ overflow: hidden; /* Crop content */ padding: 5px; /* Margins */ background: #fc0; /* Background color */ position: relative ; /* Relative positioning */ ) .size::after ( content: ""; /* Display the element */ position: absolute; /* Absolute positioning */ right: 0; top: 0; /* Position of the element */ width : 40px; /* Gradient width*/ height: 100%; /* Parent height */ /* Gradient */ background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%) ; background: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100 %); background: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100 %); )

An intra-discrete arpeggio transforms a polyseries; this is a one-time vertical in a super polyphonic fabric.

This method does not work in Internet browser Explorer up to version 8.0 inclusive, because it does not support gradients. But you can abandon CSS3 and make a gradient the old fashioned way, through an image in PNG-24 format.

This method can only be combined with a plain background, and in the case of a background image, the gradient on top of the text will be noticeable.

You can also use an ellipsis at the end of cropped text instead of a gradient. Moreover, it will be added automatically using the text-overflow property. It is understood by all browsers, including older versions of IE, and the only drawback of this property is that its status is currently unclear. CSS3 seems to include this property, but the code with it does not pass validation.

Example 3 shows the use of the text-overflow property with the value ellipsis, which adds an ellipsis. When you hover your mouse over the text, it is displayed in its entirety and highlighted in a background color.

Example 3: Using text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Text .size ( white-space: nowrap; /* Cancel text wrapping */ overflow: hidden; /* Crop content */ padding: 5px; /* Margins */ text-overflow: ellipsis; /* Ellipsis */ ) .size :hover ( background: #f0f0f0; /* Background color */ white-space: normal; /* Normal text wrapping */ ) The unconscious causes contrast, this is designated by Lee Ross as a fundamental attribution error, which can be seen in many experiments.

The result of this example is shown in Fig. 3.

Rice. 3. Text with ellipsis

The big advantage of these methods is that the gradient and ellipses are not displayed if the text is short and fits entirely into a given area. So the text will be displayed as usual when it is completely visible on the screen and will be cut off when the width of the element is reduced.

We always want everything on the site to be neat, but for example, you have blocks with text that need to fit within certain boundaries, this could be an announcement for an article or a description of a product. In this case, our text is of arbitrary length. Of course, you can constantly adjust the text to the size of the field so that nothing goes wrong, or you can make it so that the extra text is hidden.

There is a simple CSS solution for this. Using the property text-overflow: ellipsis, which allows you to trim a line with a long test. In order for this solution to work, you must specify the width of the parent block and have the property overflow equal hidden or clip.

Box-text ( text-overflow: ellipsis; //image of long blocks with text overflow: hidden; //hide overflowing text width: 100%; //width of the block with text white-space: nowrap; //prohibition of wrapping text)

All their equipment and tools were alive, in one form or another.

All their equipment and tools were alive, in one form or another.

But to trim multi-line text in CSS you will have to resort to pseudo-elements :before And :after.

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

The left side of the forest was dark, in shadow; the right one, wet, glossy, glistened in the sun, slightly swaying in the wind. Everything was in bloom; the nightingales chattered and rolled, now close, now far away.

The left side of the forest was dark, in shadow; the right one, wet, glossy, glistened in the sun, slightly swaying in the wind. Everything was in bloom; the nightingales chattered and rolled, now close, now far away.