首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法让"text-overflow: ellipsis;“工作

无法让"text-overflow: ellipsis;“工作
EN

Stack Overflow用户
提问于 2012-03-04 21:47:44
回答 3查看 33.6K关注 0票数 17

我不能让“文本溢出:省略号;”工作...也许有人可以在这个问题上给妈妈一些帮助:

小示例:http://jsfiddle.net/qKS8p/2/

http标记:

代码语言:javascript
复制
<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td width="90"><span class="prose">column one</span></td>
        <td width="20"><span class="prose">column two</span></td>
        <td width="90"><span class="prose">column three</span></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

css样式规则:

代码语言:javascript
复制
.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

我预计“第二列”会被砍掉,因为td的宽度是20px。我也用div,tds等尝试了不同的变体,但我看不到任何变化。请注意,这在我检查过的任何浏览器中都不起作用。因此,我肯定错过了一些东西。

有数以百万计的页面是关于示例,浏览器差异和。但是我不能让它工作!根据目前的信息,现在所有主流浏览器都支持简单的文本溢出属性。所以我正在寻找一个纯粹的css解决方案(不是xul,不是jquery插件),因为这应该可以工作。

谢谢,阿卡沙

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-03-04 22:05:22

示例中代码的问题是,如果内容超过20px,表格会自动放大并忽略设置的宽度20px。下面是一个有效的示例:http://jsfiddle.net/qKS8p/34/

我补充道:

代码语言:javascript
复制
span {
  display:block;
  width:inherit;
}
票数 15
EN

Stack Overflow用户

发布于 2012-03-04 22:00:55

这把小提琴很适合我:http://jsfiddle.net/wRruP/3/

HTML

代码语言:javascript
复制
<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>

​### CSS

代码语言:javascript
复制
div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40px;
}

似乎必须在限制文本宽度的块上设置text-overflow<span>是一个内联元素,它没有真正的宽度,因此不能真正切断文本,并且当我嵌套一个<p>时,它没有继承该属性。

票数 31
EN

Stack Overflow用户

发布于 2012-03-04 21:59:50

尝试在相同的块级元素(如div) like this上同时设置text-overflow属性和固定宽度

代码语言:javascript
复制
<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td><div class="prose" style="width: 90px">column one</div></td>
        <td><div class="prose" style="width: 20px">column two</div></td>
        <td><div class="prose" style="width: 90px">column three</div></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

使用您的原始CSS:

代码语言:javascript
复制
.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9555398

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档