保留白色 Space

Question

我想保留白色 space 以使每一列都正确对齐。但是侧边栏会自动删除任何多余的东西 space，有人可以给我一些建议吗。

Google Sidebar

function Test1() {

var lineBrk = "<br />"
var aValues = "```"+lineBrk+
"BLB001| APPLE | O/B   |   100.00"+lineBrk+
"AG010 | ORANGE| O/B   |   125.25"+lineBrk+
"B123  | KIWI  | O/B   |    95.00"+lineBrk+
"```"

 // Display a modal dialog box with custom HtmlService content.
 var htmlOutput = HtmlService
     .createHtmlOutput(aValues);

 SpreadsheetApp.getUi().showSidebar(htmlOutput);

}

Answer 1

边栏是使用 Google Apps 脚本 HTML 服务创建的，这意味着它们使用 html and that is why Serge included a link to a question 关于   的使用。另一种方法是将文本行括在 <pre> 标签上。

下面是对构建 html 输出以处理堆栈片段的代码的改编。

var lineBrk = "</pre><br />"
var aValues = 
"<pre>BLB001| APPLE | O/B   |   100.00"+lineBrk+
"<pre>AG010 | ORANGE| O/B   |   125.25"+lineBrk+
"<pre>B123  | KIWI  | O/B   |    95.00"+lineBrk;

document.write(aValues);

Answer 2

如果您希望显示纯文本，Ruben 上面的回答会奏效。如果您想要某种格式，使用简单的 HTML 布局样式会有所帮助。

您可以将 table 示例解释为以下内容 HTML:

<div id="table">
  <div class="row">
    <div class="col">BLB001</div>
    <div class="col">Apple</div>
    <div class="col">0/B</div>
    <div class="col">100.00</div>
  </div>
  <div class="row">
    <div class="col">AG010</div>
    <div class="col">Orange</div>
    <div class="col">0/B</div>
    <div class="col">125.25</div>
  </div>
  <div class="row">
    <div class="col">B123</div>
    <div class="col">Kiwi</div>
    <div class="col">0/B</div>
    <div class="col">95.00</div>
  </div>
</div>

然后，在 style 标记或链接的 CSS 文件中，设置显示：

#table { 
  display: table; 
  table-layout:fixed; 
  width: 300px;  /* This could be any width you'd like */
  font-family:monospace;
}
.row { display: table-row; }
.col { display: table-cell; }

如果需要，您还可以设置边框。使用此方法的好处是，如果您的数据是可变的，您可以使用应用程序脚本循环填充任意数量的行或单元格。

Here's a very simple CodePen demo 仅显示布局。

保留白色 Space

Preserve White Space

html

sidebar

google-apps-script