文本溢出省略號與表

我有一個佈局，使用類中心框來居中。現在我想添加文本溢出省略號，但它不再居中。文本溢出省略號與表

.box-center { 
    display: table; 
    table-layout: fixed; 
    margin: 0 auto; 

    .ellipsed { 
    display: table; 
    table-layout: fixed; 
    white-space: nowrap; 
    width: 100%; 

    span { 
     display: table-cell; 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 
    } 
}

我試着添加這個，但這不是文本溢出省略號。

.ellipsed { 
    white-space: nowrap; 
    width: 100%; 

    span { 
    display: inline-block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 
}

HTML：

<div class="box-center"> 
    <div class="ellipsed"> 
    <span>Some text to be ellipsed</span> 
    </div> 
</div>

有人能幫忙嗎？

來源

2016-07-05 cocacrave

無論何時你想使用text-overlfow:ellipsis你需要定義元素的寬度，因爲你需要告訴元素應該隱藏什麼寬度並顯示省略號。

看到這個基於簡單的CSS的虛擬示例。我已經加入只是一個虛擬的寬度和工作

.ellipsed { 
 
    white-space: nowrap; 
 
    width: 100%; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    width:100%; 
 
}

<div class="box-center"> 
 
    <div class="ellipsed"> 
 
    <span>Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed </span> 
 
    </div> 
 
</div>

來源

2016-07-05 09:58:29

有什麼辦法保持寬度在100％？它是佈局的一部分，實際上box-center會擴展到內容寬度。我並不是試圖使文字具有固定寬度的橢圓，而是在視口小於跨度中的文本時進行。 – cocacrave

你可以添加100％的寬度，它也會是它的父div的100％，我剛剛舉了一個例子，因爲在你目前的情況下，100％的寬度超過了內容寬度，所以效果不會顯示，但如果內容足夠寬寬度100％也會工作....檢查更新回答 –

你的HTML是錯誤的

您使用的className但使用class

<div class="box-center"> 
    <div class="ellipsed"> 
    <span>Some text to be ellipsed</span> 
    </div> 
</div>

來源

2016-07-05 09:58:31

對不起，我應該改變它了。它是jsx，所以className是正確的。 – cocacrave

文本溢出省略號與表

回答

相關問題