dragonH,很謝謝您的幫忙!
不好意思,因為剛進入C#.net MVC,雖然還沒嘗試成功將此方法放在View中,但看了您的範例後,大概知道程式是要說明,計算title的長度以及欄位寬度,再去看要放多少.
,對嗎?
因為原本我以為一個 .
就是一個 pixel
後來發現不是這樣
所以就用 overflow: hidden 藏起來了
如果需要類似 RWD 的效果
就加個 listener
去改 max-width 就行
一個.
就是一個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>
overflow: hidden
應該可以符合你的需求沒錯
畢竟
. 的數量應該跟你需求沒啥關係就是
目前嘗試的寫法,寫在View中執行不出要的結果
你的 code 達不到你要效果應該是因為
你需要等到 page load
他才抓得到 target 的 width
補上
$(document).ready()
應該就 ok 了
目前補上以後,使用逐步執行,發現會跳過var與for的部分,所以就跑不出我要的結果,請問此部分我還可以怎麼調整呢?
我來分享一個純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>