Wechat page text overflow display ellipsis is invalid

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

chrome is normal

clipboard.png


Css
Mar.16,2021

if a single line of text overflows, that's enough

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

of course the width should be fixed


resolved
resolve

by referencing shave
  • install

    npm install shave --save
  • introduce

    import shave from 'shave';
  • deal with

    shave('selector', maxheight)

    my implementation

        ...
        import shave from 'shave'
        ...
        updated () {
            shave('.video-desc', 40)    
            shave('.ellipsis', 400)
        },
        ...

haven't you tried this, or not? This is the case with all our projects. For the time being, no problems have been found.
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
this is a multi-line support

.
Menu