问题与多行文本与铬中的省略号

Question

我卡住了一些奇怪的问题，并希望我能在这里得到一些帮助。

我有一个多行文本里面的定位标记，由span和div标记包围。 我已经添加了插件'dotdotdot'以在此文本中添加省略号。 它在Firefox中正常工作，但在Chrome中完全删除锚标签。

这里是的jsfiddle链接我已经创建了一个测试 https://jsfiddle.net/trupti11/0p7jf56m/6/

调整输出窗口宽度移动的大小（大约360像素或更低），你可以看到文本消失。

可能是什么问题？

下面是示例代码

的Html

<div class="wallTopBar" style="width:100%;"> 
     <img class="b2l_border_img" alt="" src="" style="display: block;" width="auto" height="auto"> 
      <div class="wallTitle" style="display: block; overflow-wrap: break-word;"><span class="wallTitleBox"><a href=" http://www.google.com " target="_blank">Testing for really really long long long, very looonnggg booklist name</a></span></div> 
      <div class="embedButton" style="display: block;"> 
       <span style="display: none;">Embed Code</span> 
       <img src="" width="35px" height="35px"> 
      </div> 
     <div class="dummyDesc" style="display: none;"></div></div> 

的Javascript

$(document).ready(function() { 
$(".wallTitle").dotdotdot({ 
     ellipsis: '... ', 
     watch: "window", 
     wrap : 'word', 
     fallbackToLetter: true 
    }); 
}); 

CSS

.wallTopBar { 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
    margin: auto; padding: 0; position: fixed; top: 0; z-index: 10; 
} 

.b2l_border_img { 
    height: 4px;margin: auto;width: 100%;background-color:#ccc; 
} 

.wallTitle { margin-right: 60px; } 
.wallTitle { 
    font-family: opensans-bold,Arial,Helvetica,sans-serif; 
    font-size: 18px; max-height: 60px; overflow: hidden; 
    padding-top: 0; position: relative; 
} 

.wallTitle span { 
    display: table; height: 46px; margin: 4px auto; 
    overflow: hidden; width: 98%; 
} 
.wallTitleBox { 
    border: 1px solid #cccccc; box-shadow: 3px 1px 5px #cccccc; 
} 

.wallTitle a { 
    display: table-cell;padding: 1px;vertical-align: middle; 
    text-decoration:none; 
} 

.embedButton { 
    border-radius: 6px; height: 35px;margin: 12px 8px; 
    position: absolute;right: 0;top: 4px; 
} 

.embedButton img { background-color:#ccc; } 

感谢您的帮助。

Answer 1

尝试删除onverflow: hideen至.wallTitle span。

工作fiddle

$(document).ready(function() { 
 
$(".wallTitle").dotdotdot({ 
 
\t \t ellipsis: '... ', 
 
\t \t watch: "window", 
 
\t \t wrap \t : 'word', 
 
\t \t fallbackToLetter: true 
 
\t }); 
 
});

.wallTopBar { 
 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
 
    margin: auto; 
 
    padding: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 10; 
 
} 
 

 
.b2l_border_img { 
 
    height: 4px; 
 
    margin: auto; 
 
    width: 100%; 
 
background-color:#ccc; 
 
} 
 

 
.wallTitle { 
 
    margin-right: 60px; 
 
} 
 
.wallTitle { 
 
    font-family: opensans-bold,Arial,Helvetica,sans-serif; 
 
    font-size: 18px; 
 
    max-height: 60px; 
 
    overflow: hidden; 
 
    padding-top: 0; 
 
    position: relative; 
 
} 
 

 
.wallTitle span { 
 
    display: table; 
 
    height: 46px; 
 
    margin: 4px auto; 
 
    x-overflow: hidden; 
 
    width: 98%; 
 
} 
 
.wallTitleBox { 
 
    border: 1px solid #cccccc; 
 
    box-shadow: 3px 1px 5px #cccccc; 
 
} 
 

 
.wallTitle a { 
 
    display: table-cell; 
 
    padding: 1px; 
 
    vertical-align: middle; 
 
text-decoration:none; 
 
} 
 

 
.embedButton { 
 
    border-radius: 6px; 
 
    height: 35px; 
 
    margin: 12px 8px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 4px; 
 
} 
 

 
.embedButton img { 
 
background-color:#ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://book2look.com/javascript/jquery.dotdotdot.min.js"></script> 
 

 
<div class="wallTopBar" style="width:100%;"> 
 
    <img class="b2l_border_img" alt="" src="" style="display: block;" width="auto" height="auto"> 
 
    <div class="wallTitle" style="display: block; overflow-wrap: break-word;"><span class="wallTitleBox"><a href=" http://www.google.com " target="_blank">Testing for really really long long long, very looonnggg booklist name</a></span></div> 
 
    <div class="embedButton" style="display: block;"> 
 
    <span style="display: none;">Embed Code</span> 
 
    <img src="" width="35px" height="35px"> 
 
    </div> 
 
    <div class="dummyDesc" style="display: none;"></div></div>

希望这有助于:)