如何爲段落添加內容？

我想創建一個包含名稱，成本（如「3.66 $」）的段落。但問題是我想填充點（「......」）的空間，我不知道如何。我從數據庫中獲取值（名稱爲&），每個名稱都是不同的，所以我想不出讓空間充滿點的方式。例如，行：
如何爲段落添加內容？

"apple      20.58$"

"banana and ice cream   4.99$"

需要是：

"apple ...................... 20.58$"

"banana and ice cream ........ 4.99$"

這是代碼：

for (var i = 0; i < data.d.length; i++) { 
    $(document).ready(function() { 
     $("#ShowMenu").append(
      "<p style='text-align: left;margin: 0px;'>" + 
       "<span style='font-size: large;font-weight: bold;float:left;'>" + data.d[i].title + "</span>" + 
       "<span style='float:right;'>" + data.d[i].cost + "</span>" + 
      "</p>" 
     ); 
    }); 
}

來源

2016-11-20 lior bar

你嘗試搜索和嘗試這些解決方案？有很少的CSS和JavaScript http://stackoverflow.com/questions/34166734/dot-leaders-with-picture-background http://stackoverflow.com/questions/5476673/css-justify-text-fill-space-帶點 – yuriy636

你可以發佈一些HTML，所以我們可以看到測試代碼？ – Alvaro

您可以簡單地計算成本和名稱之間的空格，並用相同數量的點替換它們 – ted

如果要更換的值（而不是正則表達式），只有值的第一個實例將被替換。要替換指定值的所有，請使用全局（g）修飾符（請參閱下面的「更多示例」）。

Souce。

問題是，替換替換第一次發現的事件。你可以這樣做：

function replaceAll(input, what, withWhat) { 
    while (input.indexOf(what) !== 0) { 
     input = input.replace(what, withWhat); 
    } 
    return input; 
}

但是這不是性能和不優雅。爲了改善它，你需要使用正則表達式：

function replaceAll(input, what, withWhat) { 
    return input.replace(new RegExp(what, 'g'), withWhat); 
}

，並呼籲replaceAll。如果你想這使它更一般的，你可以做這樣的事情：

String.prototype.replaceAll = replaceAll;

編輯：

答案從上面的文字是由Java腳本產生的假設來了。從評論部分和問題編輯中可以看出我的假設是錯誤的。真實情況是由於CSS樣式與float之間出現空格。

一個可能的解決方案是創建一個點字符的圖像和其他內容的所需背景的另一個圖像。將段落的背景圖像設置爲重複的點圖像，並將跨度的背景圖像設置爲彩色圖像。

另一種可能的解決方案是不使用float，而是使用javascript編寫點，直到寬度達到所需值。這涉及標籤測量並且速度很慢。

來源

2016-11-20 11:52:14

該解決方案用點代替空格？我問，因爲沒有空格！我將「float」添加到值中。要替換什麼？ –

@ liorbar，因爲你沒有添加你的HTML代碼，我不得不猜測你的情況。通過「浮動」你是否意味着一個CSS規則設置項目浮動到右邊？如果是這樣，那麼，而不是Javascript替換，您可能需要爲您的段落設置一個點的水平重複的背景圖像和背景顏色的背景圖像來覆蓋點。 –

我添加了HTML代碼（我將它添加到JS中，因爲我從數據庫中獲取了值）。我不明白圖像的解決方案。你能給我看一個例子嗎？ –

您可以使用函數如下：

function getReceiptItem(name, cost, maxLength) { 
    var dotsLength = maxLength - name.length - cost.length - '$'.length; 

    if (dotsLength < 0) { 
    name = name.substring(0, name.length + dotsLength); 
    dotsLength = 0; 
    } 

    return name + Array(dotsLength).join('.') + cost + '$'; 
}

Full example

唐`忘記設置等寬字體的收據，如：

* { 
    font-family: 'monospace'; 
}

來源

2016-11-20 12:19:51

如何爲段落添加內容？

回答

相關問題