首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何防止Markdown的列表被占用空间?

如何防止Markdown的列表被占用空间?
EN

Stack Overflow用户
提问于 2018-12-05 12:59:31
回答 1查看 1.6K关注 0票数 1

我有:

代码语言:javascript
代码运行次数:0
运行
复制
- `foo`: some text                       Default: false
- `barThatIsTooLong`: again some text    Default: true

但在Bitbucket自述文件中,空白空间将自动被吃掉,这将显示为:

  • foo:某些文本默认值: false
  • barThatIsTooLong:还是一些文本默认值: true

我希望将默认值垂直对齐。

如何告诉Bitbucket的降价不吃我的空间?有可能吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-05 15:25:51

除非您使用表而不是列表,否则您可能做不到。

代码语言:javascript
代码运行次数:0
运行
复制
| Variable           | Description     | Default |
| -------------------|---------------- | ------- |
| `foo`              | some text       | false   |
| `barThatIsTooLong` | again some text | true    |

如果您使用的站点没有去掉原始的HTML和/或样式属性,那么内联浮动可能有效:

代码语言:javascript
代码运行次数:0
运行
复制
- `foo`: some text                    <span style="float:right; width:10em;">Default: false</span>
- `barThatIsTooLong`: again some text <span style="float:right; width:10em;">Default: true</span>

冗长的答案

折叠空格是HTML的一个“特性”,其中Markdown是一个子集。“功能”通常被称为“不重要的空白”。其想法是所有的空格(空格、制表符、换行符等)被折叠到一个单独的空间中(请参见空格行为选项摘要)。请注意,这种空格折叠是由您的浏览器完成的,而不是Markdown解析器。如果您使用浏览器的“查看源”的“检查”功能,您将看到HTML列表保留空白:

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
<li><code>foo</code>: some text                       Default: false</li>
<li><code>barThatIsTooLong</code>: again some text    Default: true</li>
</ul>

换句话说,Markdown不是在吃您的空白,而是您的浏览器。因此,下一个问题是如何在HTML中保留空白,以及如何将其合并到Markdown中。有许多不同的方法可以做到这一点,但最终,它们不会像你所希望的那样起作用。

  1. <pre>标记保留空白,但它是块级标记,不适合内联使用。因为您只需要一些内联空白,保留下来,而不是整个文本块,这是没有用的。
  2. 可以使用whitespace:pre CSS规则来获得这种效果,但是在Markdown中看起来很难看。此外,出于安全考虑,Bitbucket可能会删除您的style标记(也是如此)。
  • foo:一些文本默认值: false - barThatIsTooLong:还是一些文本默认值: true
  1. 由于不破坏空间不折叠,您可以使用它们,而不是常规空间。事实上,你只需要每一个其他的空间就可以成为一个不分裂的空间。但是,再一次,它是丑陋的。更糟糕的是,由于非中断的空格是作为HTML实体输入的,您的Markdown中有一个显示的字符长6个字符,因此这些列在源文档中没有正确地排列。
  • foo:一些文本的等级等级,自愿性,自愿性,默认:假- barThatIsTooLong:再一次,一些文本,再一次,更多的默认:真

但是,即使你得到上面的一个工作,浏览器可能仍然不会显示您的列表,如您所希望的。Bitbucket,就像大多数网站一样,他们的网站不使用单空间字体(代码块除外)。因此,行中的每个字母的宽度都不相等,而且您的列仍然不会对齐。请注意,在这里也存在相同的情况。上面的最后一个示例呈现如下:

  • foo:某些文本的自愿性、违约性:虚假
  • barThatIsTooLong:同样地,一些文本被修改为默认: true

您可以在编辑器中看到同样的效果。如果将字体从单空格字体更改为比例字体,则会注意到列将不对齐。而这种不对齐将随着不同比例字体的不同而变化。因此,简单地调整空格的数目并不能保证正确的对齐。你甚至可能会出现半宽度的偏差。

当然,网站一直都有专栏。但这些列不是用内联文本“伪造”的。每一列都包装在自己的块级元素中,CSS规则、位置和大小适当地包含在包含框中,如这个答案所示。但是,这同样需要原始的HTML和CSS,而Bitbucket可能出于安全考虑而不允许这样做。

另一种选择可能是使用内联浮点数:

代码语言:javascript
代码运行次数:0
运行
复制
- `foo`: some text                    <span style="float:right; width:10em;">Default: false</span>
- `barThatIsTooLong`: again some text <span style="float:right; width:10em;">Default: true</span>

这将导致<span>被浮动到包含块(列表项)的最右边边缘。为了避免浮动的项目看起来正确对齐,我们包括了width,它确保每个<span>都是相同的宽度。实际宽度至少需要与span中最大的文本一样宽。然而,由于安全原因,Bitbucket可能会删除原始HTML。

然而,Bitbucket的Markdown实现确实支持简单的表格。因此,如果您真的想要列,可以将它们实现为表。当然,除了列标题之外,还需要有表行而不是列表项,这可能是您想要的,也可能不是您想要的。

代码语言:javascript
代码运行次数:0
运行
复制
| Variable           | Description     | Default |
| -------------------|---------------- | ------- |
| `foo`              | some text       | false   |
| `barThatIsTooLong` | again some text | true    |
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53632929

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档