如何删除 html 中文本之间的间距

Question

我有以下代码：

 .underline { --line: #646B8C; --color: #2B3044; text-decoration: none; color: var(--color); position: relative; width: 140px; margin: 16px 0; }.underline span { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 16px; line-height: 20px; transform: translateZ(0); }.underline spanS { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 14px; line-height: 19px; transform: translateZ(0); }.underline svg { vertical-align: top; display: none; width: auto; height: 0; position: relative; fill: none; stroke-linecap: round; stroke-linejoin: round; }.underline:hover { --background-size: 0%; --background-delay: 0s; --stroke-dashoffset: 26; --stroke-duration: .3s; --stroke-easing: cubic-bezier(.3, 1.5, .5, 1); --stroke-delay: .195s; }

 <p>Through <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"> <spanS>DataCamp</spanS> <svg viewBox="0 0 13 20"> <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /> </svg> </a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

如何删除逗号和DataCamp之间的空格？ 我将如何删除这个空间：

关于我如何做到这一点的任何建议？ 我尝试删除width属性，但它仍然不起作用。 什么 css 属性导致了这个问题？

Answer 1

您可以将所有a标签代码和以下文本放在一行中，而无需在代码编辑器中返回任何内容。 这将删除 a 标签和逗号之间不需要的空格。

  <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"><span>DataCamp</span><svg viewBox="0 0 13 20"><polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg></a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 .underline { --line: #646B8C; --color: #2B3044; text-decoration: none; color: var(--color); position: relative; width: 140px; margin: 16px 0; }.underline span { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 16px; line-height: 20px; transform: translateZ(0); }.underline spanS { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 14px; line-height: 19px; transform: translateZ(0); }.underline svg { vertical-align: top; display: inline; width: auto; height: 0; position: relative; fill: none; stroke-linecap: round; stroke-linejoin: round; }.underline:hover { --background-size: 0%; --background-delay: 0s; --stroke-dashoffset: 26; --stroke-duration: .3s; --stroke-easing: cubic-bezier(.3, 1.5, .5, 1); --stroke-delay: .195s; }

 <p>Through <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"><spanS>DataCamp</spanS><svg viewBox="0 0 13 20"><polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg></a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

Answer 2

DataCamp和 coma 之间有svg元素，它可能不渲染但保留一个空格。 尝试将其删除或将display: inline更改为display: none在.underline svg规则中。 此外，HTML 中没有spanS标签，应该只是span 。

Answer 3

又快又脏；-) 添加margin-right: -5px; 到您的.underline spanS class。

Answer 4

空格是由a标签引起的。 你是这样做的：

<a href="#">foo></a>
bar

产生“foo bar”而不是“foobar”，是吗？ 你的逗号也发生了同样的事情。 所以如果你不想移动东西，你可以在一条线上完成整个事情（不理想，但如果你讨厌它，你可以重新排列）。

把这一切放在一行上：

<a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline">
    <spans>DataCamp</spans>
    <svg viewBox="0 0 13 20">
                      <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
                    </svg>
</a>

像这样：

<a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"><spans>DataCamp</spans><svg viewBox="0 0 13 20"><polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline></svg></a>

Answer 5

DataCamp 结尾和逗号之间不需要的间隙似乎是由 HTML 中的空格引起的。

此代码段删除 svg 标记之前的换行符和结束标记之前的换行符。

 .underline { --line: #646B8C; --color: #2B3044; text-decoration: none; color: var(--color); position: relative; width: 140px; margin: 16px 0; }.underline span { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 16px; line-height: 20px; transform: translateZ(0); }.underline spanS { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 14px; line-height: 19px; transform: translateZ(0); }.underline svg { vertical-align: top; display: none; width: auto; height: 0; position: relative; fill: none; stroke-linecap: round; stroke-linejoin: round; }.underline:hover { --background-size: 0%; --background-delay: 0s; --stroke-dashoffset: 26; --stroke-duration: .3s; --stroke-easing: cubic-bezier(.3, 1.5, .5, 1); --stroke-delay: .195s; }

 <p>Through <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"> <spanS>DataCamp</spanS><svg viewBox="0 0 13 20"> <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /> </svg></a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>