Reprinted from chenkai. Life/web/handlin…

When the number of title words on a page is variable and you need to accommodate a variety of screen widths, you may encounter the following requirements:

How to display ellipsis at the end of font

If the display area is small, we can set it to a single line, which is easy to display the ellipsis at the end of a single line of text

.wrapper {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Copy the code

However, if the display area is large, we need to set the ellipsis on the last line of multiple lines. For multiple lines of text, the common method is as follows

Mobile compatible, suitable for WebKit kernel browser, in addition, for the exceeding part of the font will still be displayed, as shown in the following figure

hello hello hello hello hello hello hello hello

So we usually need fixed height and overflow: hidden; , line-height or font-size is used

hello hello hello hello hello hello hello hello 

.wrapper {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
}
Copy the code

Fixed a problem where the last line of text may be displayed outside the border

For multiple lines of text, where the last line of text may not appear fully outside the border, In this case, we need to set the external container height to an integer multiple of the font height. For example, for a 6em container, we can set its line-height to 3em, or we can set its font size to 2.5em and set its line-height to 1.2.

How does text size adapt to containers

Dynamically modify font sizes

Set different font sizes according to different font lengths; Or gradually change the initial font size until the font container width and height is smaller than the outer container width, but since there is a minimum font size, this method does not work with too many pairs of text

Zoom,transform Scales the font container

We can calculate the scale ratio by the width and height of the outer container and font container. We can adjust the width and height of the container by setting zoom and scale, such as:

<textarea id="textarea" rows="5" placeholder="Enter the text and see what it looks like in real time."></textarea>
<div id="wrapper" style="border: 1px solid gray; width: 60px; height: 60px;"></div>
<script>
textarea.addEventListener('input'.function () {
  wrapper.innerHTML = `<div id="inner" style="word-break: break-all; overflow-wrap: break-word;" >The ${this.value}</div>`;
  const wrapperSty = wrapper.getBoundingClientRect();
  const innerSty = inner.getBoundingClientRect();
  const scale = Math.min(wrapperSty.width /innerSty.width, wrapperSty.height /innerSty.height, 1)
  inner.style.zoom = scale;
});
</script>
Copy the code

SVG viewBox

The viewBox attribute of SVG allows you to specify a given set of graphics extensions to fit a particular container element. SVG, however, does not handle text newlines very well, and this approach works better for single-line text

<svg class="hd" width="100%" height="50" viewBox="0 0 900 50." "  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text class="svg-text" x="0" y="20">So what do you do if you have a very long heading that you might not fit in one line</text>
</svg>
Copy the code