如何仅使用内联样式去除跨度元素之间的空间？

我想用两种颜色（红色和蓝色）显示一个单词“WorldWide”。如何仅使用内联样式去除跨度元素之间的空间？

我试过使用span元素如下。

<span style="color:red">World</span><span style="color:blue">Wide</span>

但问题是，电子邮件客户端等等的文本格式的HTML如下结束，显示了两个词（世界宽，而不是字宽）由于在html添加的新线路。

<span style="color:red">World 
</span> 
<span style="color:blue">Wide 
</span>

所以我的问题是：如何考虑HTML客户端格式/添加新行以跨度元素显示一个单词的两种颜色？请注意，电子邮件客户端只允许使用内联样式，因此我不能使用<style></style>标签。

2017-07-07 Books

另外，你可以使用这个已经是全球先生的红蓝色图片http://www.iaam.com/artimages/music/Pitbull-rapper.jpg –

是的，我想我会去那个！：D – Books

您可以float第一个元素。

<span style="color:red; float: left;">World</span> 
 
<span style="color:blue">Wide</span>

2017-07-07 15:45:42

如果超过2个单词/跨度，这似乎不起作用。世界范围只是一个例子。我没有意识到解决方案可能只适用于“两个”跨度而不是3个或更多。 – Books

@Books如果你有3个单词，则将前两个单词浮起。或者如果你有42个单词，将第41个浮动。或者只是把它们全部浮起来，这也没关系。 –

@Books是你为什么取消这个解决方案？根据你的文章，我的解决方案解决了这个问题。为什么你不选择它作为一种解决方案，因为你需要一个不同于你在帖子中提供的解决方案？您有责任在帖子中重现问题，并解决该问题。如果您的实际问题与您发布的内容不同，我们该如何知道？ –

浮动属性指定了一个框（的元素）是否应该浮动。您可以在span标记中添加float。为您的代码，您只需要float:left与第一个span标签。

因此，这将是

<span style="color:#FF0000; float: left">World</span> 
 
<span style="color:#0D0DFF;">Wide</span>

2017-07-07 15:51:41

我知道浮不工作那么好与电子邮件。我知道跨度是内联块，但添加内联代码可能会使其工作。

<span style="color:red;display:inline-block;">World</span> 
 
<span style="color:blue;display:inline-block;">Wide</span> and the rest of the words

让我知道这是否正常工作。

2017-07-09 23:42:02 Syfer

回答