文本溢出省略号与表

我有一个布局，使用类中心框来居中。现在我想添加文本溢出省略号，但它不再居中。文本溢出省略号与表

.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

文本溢出省略号与表

回答

相关问题