CSS 隐藏多余的字符并导致问题

Question

对于隐藏的短句和长句，最后上下宽度不一样。为什么？如何解决。

这是我的部分 html 代码：

.gridViewInside {
    position: relative;
    padding: 15px;
    background-color: #1f1e1e;
    box-sizing: border-box;
}

.gridViewInfo {
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
}

.gridViewDes {
    color: #b3b3b3;
    margin: 0;
}

.textOverName {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.textOverInfo {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

<div class='gridViewItem'>
    <div class='gridViewInside'>
        <img src='https://lh3.googleusercontent.com/proxy/ELF6jphb9QB2Iu8qjl4WOS2XGo018PcJc5LbwpArHi3vpxV7jurtbgN4QTqGRV_qN1Yac4xSg4hdIcMHlnF99LRNeORKVNnukeqMwSZbcBYQ'>
        <div class='textOverName'>
            <p class='gridViewInfo'>title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title
                title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title</p>
        </div>
        <div class='textOverInfo'>
            <p class='gridViewDes'>album_description album_description album_description album_description</p>
        </div>
    </div>
</div>

结果：

Answer 1

我看到的唯一问题是 web kit box-orient 不稳定，应该替换为 flexboxes wich are an improed verion of box-orient, because box-orient is quite unstable and has non standard behavior across browsers and is not supported anymore, for more info read this。

这是对您的 css 的修复：

.gridViewInside {
    position: relative;
    padding: 15px;
    background-color: #1f1e1e;
    box-sizing: border-box;
}

.gridViewInfo {
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
}

.gridViewDes {
    color: #b3b3b3;
    margin: 0;
}

.textOverName {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; /* here is the fix*/
    justify-content: flex-start;
    -webkit-line-clamp: 1;
}

.textOverInfo {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    display: flex; /* here is the fix*/
    justify-content: flex-start;
    -webkit-line-clamp: 2;
}

Answer 2

在您的 css 上，您的目标是 .textOverName，它是您要省略的文本的父级而不是目标 .gridViewInfo，您还必须添加 white-space: nowrap; 要防止文本换行，只需对其进行编辑并添加一些垂直填充即可。

.gridViewInside {
    position: relative;
    padding: 15px;
    background-color: #1f1e1e;
    box-sizing: border-box;
}


.gridViewDes {
    color: #b3b3b3;
    margin: 0;
}

.textOverName .gridViewInfo{
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    padding: 20px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.textOverInfo {
    border: 1px solid red;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}

<div class='gridViewItem'>
       <div class='gridViewInside'>
         <img src='https://lh3.googleusercontent.com/proxy/ELF6jphb9QB2Iu8qjl4WOS2XGo018PcJc5LbwpArHi3vpxV7jurtbgN4QTqGRV_qN1Yac4xSg4hdIcMHlnF99LRNeORKVNnukeqMwSZbcBYQ'>
         <div class='textOverName'><p class='gridViewInfo'>title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title </p></div>
         <div class='textOverInfo'><p class='gridViewDes'>album_description album_description album_description album_description</p></div>
       </div>
      </div>

CSS 隐藏多余的字符并导致问题

CSS hides extra characters and causes problems

html

css

hidden

overflow