If the multi-line or single-line text exceeds the display point of two lines, how to ensure that the content is always centered vertically?

what I need now is this. I currently implement a div box that displays text beyond two lines. If a single line is to be vertically centered, if I use display:flex;align-items:center; for the container, the text will not be truncated when there is too much text.

.info_des {
      .margin-all(10, 10, 12, 8);
      display: flex;
      align-items:center;
      div{
        .line-height(21);
        .height(42);
        .font-size(14);
        color: -sharp000;
        letter-spacing: 0.01px;
      }
    }
    
<div class="info_des">
        <div class="line_clamp2">is the leading online shopping platform in is the leading online shopping platform inis the leading online shopping platform in</div>
    </div>

Css html javascript

Dec.20,2021

.info_des {
      .margin-all(10, 10, 12, 8);
      display: flex;
      align-items:center;
      .height(42);
      div{
        .line-height(21);
        .font-size(14);
        color: -sharp000;
        letter-spacing: 0.01px;
      }
    }

suddenly figured out the solution. The vertical center of the display:flex; is the center of the elements inside. Give the outer div a fixed height here is the height of two lines of text. Do not give the height of the text inside. When there is a line, the height of the div inside is the height of the line. When there is two lines of text, two lines of text will be displayed, and the effect beyond the display point will not be affected.

display:box + line-clamp seems to meet your requirements

Previous: How do components that are far apart in a vue project communicate?

Next: Mysql single table query is slow? y

The problem of uploading attachments to the mobile version
do the gods have plug-ins for uploading attachments in the mobile version that can also be uploaded more than one? ...

Html5 node.js css html javascript

Feb.26,2021
How to implement fixed positioning relative to a specified parent element
the traditional position: fixed; is relative to the window, and there are two main points of the problem . relative to the specified parent element fixed positioning encountered the following problems in mobile development. The green box is the...

Css html javascript

Feb.26,2021
Does JS judge multiple clicks on the same button?
as shown in the figure, there are four sort buttons in a table header, and the requirements are as follows: the first click on descending order, the second click on ascending order, and the third click on the default display (no sorting); I would li...

Css html javascript

Feb.27,2021
How to get style attribute values in an inline style
directly above the picture, how to take this top value ...

Html5 css html javascript

Feb.27,2021
How to achieve automatic focus and jump in vue?
as shown in the figure, v-for generates input, in Vue. When the add button is clicked, the cursor automatically focuses on the latest input, window and automatically moves to the appropriate location! ...

Css html javascript vue.js

Feb.27,2021
How to realize the undo function of drawing on canvas
the only thing I can think of now is to save the current canvas to an array every time I finish drawing, and then take it out of the array when I undo it ...

Canvas html5 css html javascript

Feb.28,2021
The problems encountered by antd dropdown
import React, {Component} from react ; import {Menu, Dropdown, Icon} from antd ; const handleClick = () => { console.log(this); }; const menu = ( <Menu onClick={handleClick} onSelect={({item, key, selectedKeys}) => { con...

Node.js css html javascript

Mar.01,2021
WeChat Mini Programs, why, after Wechat authorized to click permission, why can not directly get the avatar information, but also need to click again?
...

Css html javascript java

Mar.01,2021
Vue keep-alive cannot cache
the scheduling page clicks the order to enter the order details. When you return to the scheduling page, you will request data rendering again. Now you want to return to the previous page without rendering. cannot be cached using keep-alive, and activa...

Node.js html5 css html javascript

Mar.02,2021
When using jquery.dataTable, the header is not aligned with the content. Please take a look at it.
var t = $( -sharplxu_dr_table ).dataTable({ data: returnData, language: trans(), sDom: "top"i , "scrollX": true, paging:true, pageLength: 10, autoWidth: true, d...

Php css html javascript

Mar.02,2021
How to zoom the chart drawn by canvas
use canvas to draw a chart, but how to implement an adaptive browser ...

Html5 css html javascript

Mar.02,2021
Optimization of dynamic setting scroll bar in Firefox browser
recently, if you want to make a table, you need to fix the header and display the first two columns, because the table has a large number of columns, and the width of the table is more than 7000 px. then I have to do fixed two-column positioning. Calcul...

Html5 css html javascript

Mar.02,2021
How to use JavaScript or node.js to find the location according to the people in the picture in the video?
how to use JavaScript or node.js to find the location according to the people in the picture in the video? do you have any packages or some common simple methods? ...

Node.js css html javascript

Mar.03,2021
The communication between Vue2.0 sibling components (or multilevel components) is better with Vuex or EventBus.
through vuex, it seems that you need to create an extra state variable, and then modify the state through component A, while component B listens for changes in the state, thus realizing the transmission of events. But it feels like the value of this sta...

Vuex vue.js css html javascript

Mar.03,2021
How does jq get the date and week of the last seven days
jq gets the date and week of the last seven days, for example: ...

Html5 css html javascript

Mar.04,2021
Invalid jump in mpvue child src/app.vue
determine whether the token,success is printed in this app.vue, but the page does not jump. What is the situation ...

Css html javascript

Mar.04,2021
Video track UI for Video processing
< H2 > encounter an image track that needs to be similar to the figure in a project < H2 > what UI should be used for video tracks like this in the front end, and what common libraries are there < H1 > Thank you! < H1 > ...

React.js html5 css html javascript

Mar.04,2021
How to get the value saved in input autocomplete effect
The input tag has an autocomplete effect, so where are the entered values saved? How can I get it? ...

Css html javascript

Mar.04,2021
Datatable paging control modification
By default, the paging control of datatable is like this. Only the document can be found to control whether the first and last pages, numeric buttons, upper and lower pages are displayed. what you need to do now is to change the default display of 1...

Css html javascript

Mar.05,2021
How to get the DOM element under the current position of the mouse, or determine whether there are any elements in the current position.
how do I get the ID, of the DOM element in the current position of the mouse or determine if there is a DOM element in the current position? the mouse is followed by a picture and is written with the onmousemove method. I don t know if it will affect...

Css html javascript

Mar.05,2021