我遇到了一些奇怪的问题,希望我能在这里得到一些帮助。
我在锚标签内部有一个多行文本,它被span包围,然后是div标签。 我添加了插件' dotdotdot'向此文本添加省略号。 它在Firefox中运行良好,但在chrome中它完全删除了锚标记。
这是我为测试创建的jsfiddle链接 https://jsfiddle.net/trupti11/0p7jf56m/6/
将输出窗口宽度调整为移动大小(大约360px或更小),您可以看到文本消失。
可能是什么问题?
以下是示例代码
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; }
感谢您的帮助。
答案 0 :(得分:1)
尝试将onverflow: hideen
移至.wallTitle span
。
工作fiddle
$(document).ready(function() {
$(".wallTitle").dotdotdot({
ellipsis: '... ',
watch: "window",
wrap : 'word',
fallbackToLetter: true
});
});
.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>
希望这会有所帮助:)