如何使用HTML / CSS在文本中插入空格/制表符？

时间：2012-03-20 18:35:06

标签： html css tabs space pre

可能的方法：

<pre> ... </pre>

或

style="white-space:pre"

还有别的吗？

18 个答案:

答案 0 :(得分：120)

要在两个单词/句子之间插入tab space，我通常会使用

&emsp;和&ensp;

答案 1 :(得分：102)

在空间宽度/高度超过&nbsp;的情况下，我通常使用

用于水平间隔：

<span style="display:inline-block; width: YOURWIDTH;"></span>

垂直间隔：

<span style="display:block; height: YOURHEIGHT;"></span>

答案 2 :(得分：51)

您可以&nbsp;用于空格，&lt;用于<（小于，实体编号&#60;）和&gt;用于>（大于，实体编号&#62;）。

可在此地址找到完整列表：http://www.w3schools.com/html/html_entities.asp

答案 3 :(得分：37)

尝试&emsp;

根据https://www.w3.org/MarkUp/html3/specialchars.html

的文档
  

字符实体&ensp;和&emsp;表示en空格和em   空间分别是en空间是点大小的一半和em   space等于当前字体的磅值。对于固定音高   字体，用户代理可以将en空间视为等同于A.   空格字符，em空间等同于两个空格   字符。

答案 4 :(得分：22)

我喜欢用这个：

在你的CSS中：

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

在您的HTML中：

<p>Some Text <span class="tab">Tabbed Text</span></p>

答案 5 :(得分：16)

HTML中Spaces的类型

在文本&emsp;

之间创建四个空格

在文本之间创建两个空格-&ensp;

在文本之间创建规则的空格-&nbsp;

创建一个狭窄的空间（类似于常规空间，但略有不同- "&thinsp";

句子之间的间距-"</br>"

此链接可能会对您有所帮助。签出[https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

答案 6 :(得分：15)

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

本段的第一行将缩进约五个字符，类似于标签缩进

有关详细信息，请参阅here

答案 7 :(得分：6)

<span style="padding-left:68px;"></span> 你也可以用 填充左 填充右 填充顶 填充底

答案 8 :(得分：3)

如果您要求标签对齐某些行中的内容，可以使用<table>

将每一行放在<tr> ... </tr>

中

以及<td> ... </td>

中该行内的每个元素

当然，您始终可以控制每个表格单元格的填充以调整它们之间的空间

这将使它们对齐并且它们看起来非常漂亮：）

答案 9 :(得分：3)

为什么不比@Ivar更进一步，设置自己的自定义标签样式呢。对我来说，“ tab”更容易记住和键入。

tab {
    display: inline-block; 
    margin-left: 40px; 
}

还有HTML实现... 

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

Screenshot of this code sample

还有我的屏幕截图...

答案 10 :(得分：2)

或者称为固定空间或硬空间，非中断空格（NBSP）用于编程和文字处理，以在不能被自动换行打断的行中创建一个空格。借助HTML，&nbsp;允许您创建多个在网页上可见的空间，而不仅仅是在源代码中。

答案 11 :(得分：1)

白色空间，你不能只使用填充？这是一个想法，对不起，如果我没有得到正确的，但这就是你可以在你的元素周围添加一些“空白区域”。所以你可以使用以下CSS标签：

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

再次抱歉，如果这不是你所追求的。

答案 12 :(得分：1)

为什么不使用标准CSS tab-size？
插入制表符（如果标准制表键移动光标），请按ALT + 0 + 0 + 9 

.element {
    -moz-tab-size:4;
    tab-size:4;
}

我的首选：

*{-moz-tab-size:1;tab-size:1;}

外观片段或
快速建立的例子
https://css-tricks.com/almanac/properties/t/tab-size/ 

.t1{
	-moz-tab-size:1;
	tab-size:1;
}
.t2{
	-moz-tab-size:2;
	tab-size:2;
}
.t4{
	-moz-tab-size:4;
	tab-size:4;
}
pre {border:1px dotted;}
<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>


<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

答案 13 :(得分：0)

您可以像<span style="padding-left: 20px;">这样填充，也可以在此处查看更多方法-blank space in html

答案 14 :(得分：0)

您可以使用此代码&#8287;在html中添加一个空格。对于制表符空间，请使用5次或更多次。请在此处检查：https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

答案 15 :(得分：0)

user8657661的答案最接近我的需求（跨越多行排列。）但是，我无法让示例代码按照提供的方式工作，但需要按如下方式更改它：< / p> 

<html>
<head>
<style>
.tab9 {position:absolute;left:150px; }
</style>
</head>
<body>
Dog Food: <span class="tab9"> $30</span><br/>
Milk of Magnesia:<span class="tab9"> $30</span><br/>
Pizza Kit:<span class="tab9"> $5</span><br/>
Mt Dew <span class="tab9"> $1.75</span><br/>
</body>
</html>

如果您需要右对齐的数字，可以将left:150px更改为right:150px，但是您需要根据屏幕的宽度更改数字（如果写的数字是距离屏幕右边150px。）

答案 16 :(得分：0)

这对我有用： 在我的CSS中我有：`

private UIComponent colName;

public UIComponent getColName() {
    return colName;
}

public void setColName(UIComponent colNameProzess) {
    this.colName = colName;
}

public void onTabChange(TabChangeEvent event) {
    TabView tabView = (TabView) event.getComponent();
    UIComponent uiComponent = findComponent(tabView, colName.getId());
    if (Objects.nonNull(uiComponent) && uiComponent instanceof org.primefaces.component.api.UIColumn) {
      List<SortMeta> preSortOrder = getPreSortOrder(uiComponent, "name", SortOrder.ASCENDING);
      personTableDataModel.setPreSortOrder(preSortOrder);
    } 
}

private List<SortMeta> getPreSortOrder(UIColumn column, String sortField, SortOrder sortOrder) {
    List<SortMeta> preSortOrder = new ArrayList<>();

    SortMeta sm = new SortMeta();
    sm.setSortBy(column);
    sm.setSortField(sortField);
    sm.setSortOrder(sortOrder);
    preSortOrder.add(sm);

    return preSortOrder;
}

private UIComponent findComponent(UIComponent uiComponent, String id) {
    FacesContext context = FacesContext.getCurrentInstance();
    UIComponent base = Objects.nonNull(uiComponent) ? uiComponent : context.getViewRoot();
    final UIComponent[] found = new UIComponent[1];
    base.visitTree(VisitContext.createVisitContext(context), (context1, component) -> {
        if (component.getId().equals(id)) {
            found[0] = component;
            return VisitResult.COMPLETE;
        }
        return VisitResult.ACCEPT;
    });

    return found[0];
}

然后在HTML中我只使用我的标签：

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

答案 17 :(得分：-2)

这里是“制表符”文本（复制和粘贴）“”，由于此站点的答案限制，它可能显示为不同的选项卡或显示的选项卡不完整。

相关问题
最新问题