複数行のテキストに問題があります。

Question

私は奇妙な問題を抱えています。私はここで助けを得ることができます。

私はスパンで囲まれたアンカータグの中に複数行のテキストがあり、divタグで囲まれています。 このテキストに省略記号を追加するためのプラグイン 'dotdotdot'を追加しました。 Firefoxではうまく動作しますが、Chromeではアンカータグを完全に削除します。ここで

は、私は（360px以下の周り）携帯サイズに出力ウィンドウ幅のサイズを変更して、テキストが消えて見ることができます https://jsfiddle.net/trupti11/0p7jf56m/6/

をテストするために作成したjsfiddleリンクです。

何が問題になりますか？ここで

は、サンプルコードで

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>

希望はこのことができます:)