iT邦幫忙

1

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

  • 分享至 

  • xImage

此問題是由另一個問題延伸發問。假設我在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>

希望長相:
https://ithelp.ithome.com.tw/upload/images/20190924/20115336T5XLnOpgxs.jpg

圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

5
dragonH
iT邦超人 5 級 ‧ 2019-09-24 14:09:19
最佳解答

codepen

這樣如何

滿足視覺效果

眼不見為淨 /images/emoticon/emoticon07.gif

看更多先前的回應...收起先前的回應...
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

後來發現不是這樣 /images/emoticon/emoticon11.gif

所以就用 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 檢舉

感謝您的幫忙~

2
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>
anniecat iT邦新手 3 級 ‧ 2019-09-25 10:31:58 檢舉

ccutmis,這個實作的方式比較是我沒想過的做法,我會再嘗試看看能否使用字串去達成,謝謝您的幫忙!

ccutmis iT邦高手 2 級 ‧ 2019-09-25 10:38:53 檢舉

不客氣~ 我也是在練習:)
CSS加SVG的作法幾乎什麼都能畫了,有空可以玩看看

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

好的 /images/emoticon/emoticon41.gif

我要發表回答

立即登入回答