内部の要素ごとにエンドラインテキストのストライプでテキストコンテンツを閉じる方法

Question

問題があります。オフセット幅がボディ幅よりも小さい場合、ストライプ要素の行末を自動的に閉じたいと思います。

例えば

私はストライプとアンダースコア変更した場合、この

<table> 
    <tr> 
    <td>Testingggggggggggggggggggggggggggggggggg</td> 
    </tr> 
    <tr> 
    <td align="justify">dasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td> 
    </tr> 
    <tr> 
    <td align="justify">asgjdhgdgagdasda hasdahsdas asldsad asdjasldsadas</td> 
    </tr> 
    <tr> 
    <td align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> 
    </tr> 
</table> 
<table> 
<tr> 
    <td align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> 
    </tr> 
</table> 


var td = $("td[align='justify']") 
var b_left = $('body').offset().left, 
    b_width = $('body').width(); 

for (var i = 0; i < td.length; i++) { 
var q = td[i]; 
for (var j = q.offsetWidth; j < b_width; j++) { 
    if (q.offsetWidth < b_width) { 
     q.textContent += '-' 
    } 
    } 
} 

Answer 1

これはむしろ、テキストとテスト幅を追加するよりも、ハイフンのように見える背景画像に処理できるよりも、何かのように見えます。

このトリックは、カバーするテキストセクションの後ろにレイヤーを置いた絶対配置の擬似要素を使用することです。これは、ページと同じbackground-colorを持つspan要素にコンテンツをラップし、linear-gradientを利用して「ダッシュ」を作成することで行います。

RESULT

CSS

td[align="justify"]{ 
    position:relative; 
} 
td[align="justify"]:before, 
td[align="justify"]:after{ 
    content:""; 
    position:absolute; 
    top:0px; 
    left:2px; /* handle span not reaching quite to the edge when using text-align:justify */ 
    right:2px; /* handle span not reaching quite to the edge when using text-align:justify */ 
    bottom:0px; 
} 
td[align="justify"]:before{ 
    /* 
    COLOR NOTES: 
    black = color of the "dash" 
    */ 
    background-color:black; 
} 
td[align="justify"]:after{ 
    /* 
    COLOR AND SIZING NOTES: 
    rgba(255, 255, 255, 1) = background-color of page (white) 

    First gradient runs left to right and creates the "gaps" in the black 
    1px = "gap" of background color, then remainder transparent 

    Second gradient runs top to bottom, we want a 1px line in the "middle" of our line-height 
    (lineheight/2) - (1px/2) 
    (18/2) - (1/2) 
    9 - .5 = 8.5 
    This creates a 1px high transparent "gap" 
    */ 
    background-image: 
      linear-gradient(to right, rgba(255, 255, 255,1) 1px, rgba(255, 255, 255,0) 1px), 
      linear-gradient(to bottom, rgba(255, 255, 255,1) 8.5px, rgba(255, 255, 255,0) 8.5px, rgba(255, 255, 255,0) 9.5px, rgba(255, 255, 255,1) 9.5px); 
    /* 
    SIZING NOTES: 
    6px = 5px wide dash + 1px wide gap 
    18px = text line-height 
    */ 
    background-size:6px 18px, 6px 18px; 
    background-repeat:repeat; 
} 
td[align="justify"] > span{ 
    background:rgb(255, 255, 255); 
    position:relative; 
    z-index:1; 
} 

HTML

<table> 
    <tr> 
     <td>Testingggggggggggggggggggggggggggggggggg</td> 
    </tr> 
    <tr> 
     <td align="justify"><span>dasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span></td> 
    </tr> 
    <tr> 
     <td align="justify"> 
      <span>asgjdhgdgagdasda hasdahsdas asldsad asdjasldsadas</span> 
     </td> 
    </tr> 
    <tr> 
     <td align="justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td align="justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td> 
    </tr> 
</table> 

JSFIDDLE

Answer 2

のようなその表情は、あなたはこれを試みることができます。 Check out this codepen for the working code

var td = $("td[align='justify']") 
var b_left = $('body').offset().left, 
    b_width = $('body').width(); 

for (var i = 0; i < td.length; i++) { 
var q = td[i]; 
var width = 0; // The leftover space to fill 
for (var j = q.offsetWidth; j < b_width; j++) { 
    if (q.offsetWidth < b_width) { 
     width++; 
    } 
    } 
    var bar = document.createElement('span'); 
    bar.className = 'bar'; 
    bar.style.width = width + 'px'; 
    // You could move these next 3 lines to a style sheet under the selector 
    // td[align='justify'] .bar if prefer 
    bar.style.display = 'inline-block'; 
    bar.style.height = '1px'; 
    bar.style.backgroundColor = 'black'; 

    q.append(bar); 
}