0

私はいくつかの奇妙な問題で立ち往生しており、ここで助けが得られることを願っています.

スパンと div タグで囲まれたアンカー タグ内に複数行のテキストがあります。このテキストに省略記号を追加するプラグイン「dotdotdot」を追加しました。Firefox では正常に動作しますが、クロムではアンカー タグが完全に削除されます。

テスト用に作成した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; }

助けてくれてありがとう。

4

1 に答える 1

1

に削除onverflow: hideenしてみてください.wallTitle span。

働くフィドル

$(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>

お役に立てれば ：）

于 2016-11-23T07:23:14.317 に答える