跨多行包装标记时如何避免空格 [英] How to avoid spaces when wrapping markup across multiple lines

问题描述

朋友.我正在使用 atom 编写html代码.每次输入单词"p"，它都会自动生成三行代码:

friends. I'm using atom to write html codes. Every time I input the word "p", it can generate 3-line codes automatically:

<p>

</p>

现在，我给一个内联类将两个p元素放在一行中:

now I give a inline class to put two p elements in one line:

.inline {
  display:inline-block;
 }

<p class="inline">
  Hi, friend
</p>
<p class="inline">
  s
</p>

我希望它在浏览器中显示朋友" ，但它显示朋友s" ，并且在朋友"和"s"之间留有空格. 我知道问题在于html将换行符视为空格.因此，如果我将代码写为<p class="inline">Hi, friend</p><p class="inline">s</p>，则可以获得所需的结果.所以我有两个问题:

I want it shows "Hi, friends" in browser, but it shows "Hi, friend s" with a space between "friend" and "s". I know the problem is that html treats a line-break as a space.So if I write the code as <p class="inline">Hi, friend</p><p class="inline">s</p>, then I can get the result I want. So I have two questions:

1. 多行编写代码时是否可以避免不必要的空间?(我试图在网络上搜索，但只得到答案否":

1. Can I avoid the needless space when write codes in multiple lines?（I tried to search on the web, only get the answer "No": Advanced HTML multiline formatting - removing not need spaces from new lines）
2. If No.1 can't, can I autocomplete the p element in only one line as <p></p> while using atom?(Actually, after autocomplete the codes, I can use Ctrl+J to join two lines. However, this only works for two lines(not 3 or more) and will change original line-break into a space)

真诚的等待答案.谢谢.

Waiting for answers sincerely. Thanks.

推荐答案

最终

这个答案是错误的，我知道这是错误的.我将其留给后代使用，因为以下某些信息仍然有用.

This answer was wrong and I know it is wrong. I'm leaving it for posterity because some of the information below is still useful.

忘记我在下面写的所有内容-问题只是您的CSS设置为显示为inline-block，而不是inline.

forget everything I wrote below-- the problem is just that your CSS is set to display as inline-block, not inline.

.inline {
    /*display:inline-block;*/
    display: inline;
 }

---

查看此帖子:

---

Check out this post:

如何删除inline-block元素之间的空间?

对于内联块元素，这是已知的预期行为.而且这不仅是由于元素中的新行所引起的空间，即使它们在同一行上，它也会发生，就像这样:

This is known, expected behavior for inline-block elements. And it's not just the space because of the new line in the element-- it happens even if they are on the same line, like so:

<p class="inline">Hi, friend</p>
<p class="inline">s</p>

有处理此行为的已知技术(请参见 和此处-它们都不是超级漂亮，但是情况的现实.

There are known techniques for handling this behavior (see here and here -- none of it is super pretty, but it's the reality of the situation.

总结上面的链接，它们基本上是试图以不超级丑陋或痛苦的方式在编辑器中删除空格的方法.我的首选方法是注释掉空格，如下所示:

To summarize the above links, they are basically means of trying to remove the spaces in the editor in ways that aren't super hideous or painful My preferred method is commenting out the spaces, like so:

   <p class="inline">Hi, friend</p><!--
--><p class="inline">s</p> 

...但这实际上取决于首选项.

...but it's really up to preference.

或者，您可以利用其他选项，例如浮动或 flexbox 来实现您想要的功能.

Alternately, you can leverage other options like floats or flexbox to achieve what you are looking for.

这篇关于跨多行包装标记时如何避免空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！