使文本溢出省略号在firefox和chrome中相似 [英] Make text-overflow ellipsis work similary in firefox and chrome

问题描述

我创建了一个布局来显示一些文章标题及其状态。
文章名称框具有固定宽度，我使用文本溢出：省略号来剪切太长的文章名称。另外，我在文章标题末尾添加了淡灰色虚线（如果不太长），以使标题和状态之间的差距更好。

问题是：Firefox看到，conent（标题+虚线块）太长，并用省略号切割。同时，Chrome可以做到这一点，并且可以按照我的需要进行工作。

截图：

对我而言，Chrome似乎工作方式错了，但对我来说很有用。而且firefox的工作方式就像它在逻辑上应该那样 - 当内容太长时就会切断内容。但是，为什么它会在文本的末尾将它剪掉，而不是在容器的末尾（因为它应该是这样，根据 MDN ）？

也许我在使用黑客，我不应该在这种情况下，如果你告诉我另一种实现这种视觉效果的方法，就像我在Chrome中一样。

最小的例子：

HTML：

 < p> 
< span class =left-block overflow-ellipsis> 
非常长的文章名称，不适合容器
< span class ='dots'>< / span>< / span> 
< span class =right-block> 
发布
< / span> 
< / p> 
< p> 
< span class =left-block overflow-ellipsis> 
不长的文章名称
< span class ='dots'>< / span> 
< / span> 
< span class =right-block> 
未发布
< / span> 
< / p> 
  

CSS：

  body 
 {
 background-color：white; 
} 
 
 span.left-block {
 display：inline-block; 
 width：300px; 
 border：1px纯白色; 
 
 white-space：nowrap; 
 overflow：hidden; 
 vertical-align：top; 
} 
 
 span.left-block：hover 
 {
 display：inline-block; 
 border：1px纯红色; 
} 
 
 span.right-block 
 {
 display：inline-block; 
 vertical-align：top; 
} 
 
 .dots 
 {
 display：inline-block; 
 border-bottom：1px dotted #ddd; 
 width：300px; 
} 
 
 .overflow-ellipsis {
 text-overflow：ellipsis; 
} 
  

JsFiddle可以播放： https://jsfiddle.net/ka4scx1h/3/

操作系统：Windows 7 SP1 x64

Chrome版本：57.0.2987.133（64位）

Firefox版本：51.0.1（32

感谢您的帮助。

我自己找到解决方案，只是通过改变布局。由LGSon编写的答案是不够的，因为它破坏了IE解决方案的兼容性。
我的方法很简单，直到现在我还没有发现它是很奇怪的。

1）我已经包装了内部文本标题）转换为内嵌块< span class ='text-block'>

2）添加样式'max-width：100％;显示：inline-block;'和类'overflow-ellipsis'到这个范围

3）从外部块（.left-block）中删除类overflow-ellipsis

4）新增样式'white-space：nowrap;溢出：隐藏; display：inline-block;'，什么被添加到.left-block，到.text-block

现在一切似乎都成功了！

body {background-color：white;} span.left-block {display：inline-block;宽度：300px;边框：1px纯白色;白色空间：nowrap;垂直对齐：顶部; overflow：hidden;} span.text-block {white-space：nowrap;溢出：隐藏;显示：inline-block;最大宽度：100％; } span.left-block：hover {display：inline-block; border：1px solid red;} span.right-block {display：inline-block; vertical-align：top;}。dots {display：inline-block; border-bottom：1px dotted #ddd;如果你使用的是一个文本文件，你可以使用下面的代码来创建一个文本文件： code>< p>< span class =left-block>< span class ='text-block overflow-ellipsis'>非常非常长的文章名称，不适合容器< / span>< span class ='dots'>< / span>< / span>< span class =right-block>发布< / span>< / p>< p>< ; span class =left-block>< span class ='text-block overflow-ellipsis'>不长的文章名称< / span>< span class ='dots'>< / span> < / span>< span class =right-block> Unpublished< / span>< / p>

JsFiddle结果： https://jsfiddle.net / ka4scx1h / 6 /

感谢所有试图在我的问题上进行思考的人：）

I've created a layout to display some articles captions, and their statuses. The box for article name has fixed width, and I'm using text-overflow:ellipsis to cut too long articles names. Also, I'm adding lightgrey dotted line at the end of article's title (if it's not too long), to make the gap between title and status look better.

The problem is: Firefox sees, that conent (title + dotted block) is too long, and cuts it with ellipsis. At the same time, Chrome doenst do it, and work as I need it to.

Screenshots:

For me, it's seems, that Chrome work in a wrong manner, but it's useful for me. And firefox is working just as it logically should - cut the content when it's too long. But, why does it cut it at the end of the text, not at the end of container (as it should, according to MDN)?

Maybe I'm using a hack, that I shouldn't, in this case, I'll be greateful, if you tell me another method of acheivement of such visual effect, as I have in chrome.

minimal example:

HTML:

<p>
    <span class="left-block overflow-ellipsis">
        Very-very long article name, that would not fit in container
        <span class='dots'></span></span>
    <span class="right-block">
        Published
    </span>
</p>
<p>
    <span class="left-block overflow-ellipsis">
        Not so long article name
        <span class='dots'></span>
    </span>
    <span class="right-block">
        Unpublished
    </span>
</p>

CSS:

body
{
    background-color:white;
}

span.left-block {
    display:inline-block;
    width: 300px;
    border: 1px solid white;

    white-space: nowrap;
    overflow: hidden;
    vertical-align:top;
}

span.left-block:hover
{
    display:inline-block;
    border:1px solid red;
}

span.right-block
{
    display:inline-block;
    vertical-align:top;
}

.dots
{
    display:inline-block;
    border-bottom:1px dotted #ddd;
    width:300px;
}

.overflow-ellipsis {
    text-overflow: ellipsis;
}

JsFiddle to play with: https://jsfiddle.net/ka4scx1h/3/

OS: Windows 7 SP1 x64

Chrome version: 57.0.2987.133 (64-bit)

Firefox version: 51.0.1 (32-bit)

Thanks for your help in advance.

解决方案

I've found solution by myself, just by changing layout. The answer, written by LGSon isn't sufficient, because it break IE compatibility of the solution. My method is pretty simple, and it's strange that I've didn't found it till now.

1) I've wrapped inner text (article title) into a inline-block <span class='text-block'>

2) Added style 'max-width:100%; display:inline-block;' and class 'overflow-ellipsis' to this span

3) Removed class 'overflow-ellipsis' from outer block (.left-block)

4) Added styles 'white-space: nowrap; overflow: hidden; display: inline-block;', what was added to .left-block, to .text-block

And everything seems to work now!

body
{
  background-color:white;
}

span.left-block {
  display:inline-block;
  width: 300px;
  border: 1px solid white;
  white-space: nowrap;  
  vertical-align:top;
  overflow: hidden;
}

span.text-block
{
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width:100%;
  
}

span.left-block:hover
{
  display:inline-block;
  border:1px solid red;
}

span.right-block
{
  display:inline-block;
  vertical-align:top;
}

.dots
{
  display:inline-block;
  border-bottom:1px dotted #ddd;
  width:300px;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

<p>
<span class="left-block"><span class='text-block overflow-ellipsis'>Very-very long article name, that would not fit in container</span><span class='dots'></span></span>
<span class="right-block">
Published
</span>
</p>
<p>
<span class="left-block"><span class='text-block overflow-ellipsis'>Not so long article name</span><span class='dots'></span></span>
<span class="right-block">
Unpublished
</span>
</p>

JsFiddle with results: https://jsfiddle.net/ka4scx1h/6/

Thanks all who tried to think on my problem :)

这篇关于使文本溢出省略号在firefox和chrome中相似的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！