進一步詢問如何讓欄位自動填滿點

asp.net mvc asp.net c# html5

anniecat 2019-09-24 13:54:57 ‧ 1666 瀏覽

分享至

此問題是由另一個問題延伸發問。假設我在View上有一個table，我希望可以依據欄位的大小再文字後方自動補滿點.，請問可以怎麼做，或是有什麼方向可以參考呢?

    <div class='div_table'>
        <div class='div_tr'>
            //我希望在title後方自動補滿點 . 
            <div class='div_td'>
                title
            </div>            
            <div class='div_td'>
                : content
            </div>
        </div>
    </div>

希望長相:

登入發表討論

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

2 個回答

dragonH

iT邦超人 5 級 ‧ 2019-09-24 14:09:19

最佳解答

codepen

這樣如何

滿足視覺效果

眼不見為淨

回應 9
分享
檢舉

看更多先前的回應...收起先前的回應...

anniecat iT邦新手 3 級 ‧ 2019-09-24 15:58:42 檢舉

dragonH，很謝謝您的幫忙!
不好意思，因為剛進入C#.net MVC，雖然還沒嘗試成功將此方法放在View中，但看了您的範例後，大概知道程式是要說明，計算title的長度以及欄位寬度，再去看要放多少.，對嗎?

dragonH iT邦超人 5 級 ‧ 2019-09-24 16:14:13 檢舉

anniecat

因為原本我以為一個 .

就是一個 pixel

後來發現不是這樣

所以就用 overflow: hidden 藏起來了

如果需要類似 RWD 的效果

就加個 listener

去改 max-width 就行

anniecat iT邦新手 3 級 ‧ 2019-09-25 09:54:41 檢舉

一個.就是一個pixel這件事，我看了一下好像會因為解析度不同而有不同定義，因此使用overflow: hidden應該可以應付這樣的不確定性，目前還在嘗試中，雖然還沒嘗試出來，但還是很謝謝您的幫忙!

目前嘗試的寫法，寫在View中執行不出要的結果

<script>
    var width = $('.title').width();
    var dots = "";
    for (var i = 1; i <= width; i++) {
        dots = dots + ".";
    }
    $('.title').html(title + dots);
    $('.title').css('overflow', 'hidden');
</script>

<div class='div_tr'>
    <div class='div_td title' style='width:40%;'></div>
    <div class='div_td' style='width:60%;'>: content</div>
</div>

dragonH iT邦超人 5 級 ‧ 2019-09-25 10:04:22 檢舉

anniecat

overflow: hidden

應該可以符合你的需求沒錯

畢竟

. 的數量應該跟你需求沒啥關係就是

目前嘗試的寫法，寫在View中執行不出要的結果

你的 code 達不到你要效果應該是因為

你需要等到 page load

他才抓得到 target 的 width

補上

$(document).ready()

應該就 ok 了

anniecat iT邦新手 3 級 ‧ 2019-09-25 10:29:13 檢舉

目前補上以後，使用逐步執行，發現會跳過var與for的部分，所以就跑不出我要的結果，請問此部分我還可以怎麼調整呢?

dragonH iT邦超人 5 級 ‧ 2019-09-25 10:40:05 檢舉

codepen

你可以用 console.log 把

width, dots

印出來

看是哪裡有問題

anniecat iT邦新手 3 級 ‧ 2019-09-25 17:51:03 檢舉

謝謝您，目前看起來可能是變數的關係，若調整成這樣，為什麼不會依照話面的百分比去呈現呢?

dragonH iT邦超人 5 級 ‧ 2019-09-25 18:52:45 檢舉

anniecat

外面補上一個 display: table

參考

anniecat iT邦新手 3 級 ‧ 2019-09-26 09:53:10 檢舉

感謝您的幫忙~

登入發表回應

ccutmis

iT邦高手 2 級 ‧ 2019-09-24 16:11:32

我來分享一個純CSS的作法
demo url: http://www.web3d.url.tw/ITHELP/CSS_20190924/svg_lineBg_demo.htm

<!doctype html>
<html>
<head>
<title>用SVG畫CSS背景圖</title>
<meta charset="utf-8"/>
<style>
*{
	margin:0;padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body{background:#fff;}
.div_table{display:table;width:100%;border-collapse:collapse;}
.div_tr{display:table-row;}
.div_td{display:table-cell;border:solid 1px #0AB;height:100px;vertical-align:top;word-wrap: break-word;padding:1rem;}
.div_td.vertAlignMid{vertical-align:middle;}
.textAlignCenter{text-align:center;}
.w10pct{width:10%;}.w20pct{width:20%;}.w50pct{width:50%;}
</style>

<style>
.whiteBg{background:#FFF;padding:0.3rem;}

/* 這是重點把它獨立出來 用svg畫一條寬4000的虛線 */
.svg_LineBg{
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100% 100%' version='1.1' xmlns='http://www.w3.org/2000/svg'><line x1='0' x2='4000' y1='10' y2='10' stroke='%23F00' stroke-width='6' stroke-dasharray='0 12' stroke-linecap='round' fill='transparent'/></svg>");
  background-size: 100% 100%;
  background-position:1rem 1rem;
  background-repeat: no-repeat;
  background-clip: content-box;
}
</style>
</head>
<body>
<div class="div_table">
	<div class="div_tr">
		<div class="div_td w10pct">
			<p>我說道：「爸爸，你走吧。」他往車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月台的柵欄外有幾個賣東西的等著顧客。走到那邊月台，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。</p>
		</div>
		<div class="div_td w50pct svg_LineBg"><span class="whiteBg">TITLE</span></div>
		<div class="div_td w20pct">
			<p>我與父親不相見已有二年餘了，我最不能忘記的是他的背影。</p>
			<p>那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子，我從北京到徐州，打算跟著父親奔喪回家。到徐州見著父親，看見滿院狼籍的東西，又想起祖母，不禁簌簌地流下眼淚。父親說，「事已如此，不必難過，好在天無絕人之路！」</p>
			<p>回家變賣典質，父親還了虧空﹔又借錢辦了喪事。這些日子，家中光景很是慘淡，一半為了喪事，一半為了父親賦閒。喪事完畢，父親要到南京謀事，我也要回到北京念書，我們便同行。</p>
		</div>
		<div class="div_td w20pct svg_LineBg"><span class="whiteBg">NOTICE</span></div>
	</div>
</div>
</body></html>