Added text excess to a span. After the style, it is found that it can not be aligned, this is why

original appearance
clipboard.png

text-overflow: ellipsis; overflow: hidden;2span
clipboard.png

Nov.17,2021

display: inline-block;vertical-align:middle; both sides of span are added

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>    
        .span1{
            display: inline-block;
            vertical-align:middle;
        }
        .span2{
            width: 50px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align:middle;
        }
</style>
<body>
    



    <span class="span1">123:</span><span class="span2">11111111111111111111</span>
</body>
</html>

clipboard.png


use line-heihgt


this depends on how your html structure is written to know the specific reason, perhaps by adjusting the line-height to align!

Menu