Shiny中使用html()标签时如何去除href文本与正文多余空格

问题表现 #

在Shiny应用中插入外部可点击链接时，<a>标签包裹的链接文本和前后普通正文之间会出现非预期的额外空白，异常显示效果如下：

复现问题的原有代码：

p(shiny::HTML("<span style = 'color: #a1a75f'>&emsp;&emsp;In 2022, a total of 1,277 Hawaiʻi residents ages 18 and older completed the survey. Data were collected from February through April 2022 via email, phone, postcard, and social media. Among respondents, 48% identify as Native Hawaiian and 52% as non-Hawaiian. About a quarter (28%) of respondents are from Honolulu County, 26% from Maui County, 24% from Hawaiʻi County, and 22% from Kauaʻi County. The confidence interval for the state—including breakouts for Native Hawaiians and non-Hawaiians—is 95% or higher. The county level confidence interval is 90%. For more details about confidence intervals please click<a href='目标链接地址'>here.</a></p>"),
                           style = "padding-bottom: 25px; padding-left: 25px"),


 p(shiny::HTML("<span style = 'color: #a1a75f'>Please click<a href='目标链接地址'>here</a>for more information on the survey and to access published briefs.</span></p>"),
                         style = "padding-bottom: 25px; padding-left: 25px")

问题成因 #

1. Shiny依赖的Bootstrap基础样式表默认给<a>标签设置了左右外边距
2. HTML代码中标签与相邻文本如果存在隐性格式化空格/换行，浏览器渲染时会自动保留间距，两者叠加就产生了超出预期的空白。

可行解决方案 #

方案1：单链接行内样式修正 #

如果只有少量链接需要调整，直接给对应<a>标签加行内样式清除默认边距，同时手动控制标签与文本之间的空格数量即可，修正后的代码示例：

p(shiny::HTML("<span style = 'color: #a1a75f'>&emsp;&emsp;In 2022, a total of 1,277 Hawaiʻi residents ages 18 and older completed the survey. Data were collected from February through April 2022 via email, phone, postcard, and social media. Among respondents, 48% identify as Native Hawaiian and 52% as non-Hawaiian. About a quarter (28%) of respondents are from Honolulu County, 26% from Maui County, 24% from Hawaiʻi County, and 22% from Kauaʻi County. The confidence interval for the state—including breakouts for Native Hawaiians and non-Hawaiians—is 95% or higher. The county level confidence interval is 90%. For more details about confidence intervals please click <a href='目标链接地址' style='margin:0; padding:0;'>here.</a></p>"),
                           style = "padding-bottom: 25px; padding-left: 25px"),


 p(shiny::HTML("<span style = 'color: #a1a75f'>Please click <a href='目标链接地址' style='margin:0; padding:0;'>here</a> for more information on the survey and to access published briefs.</span></p>"),
                         style = "padding-bottom: 25px; padding-left: 25px")

提示：需要正常词间距时，在标签外侧手动加1个半角空格即可，不会出现之前的大段异常空白。

方案2：全局CSS统一处理 #

如果应用内存在大量类似链接，直接在UI模块开头加一段全局CSS，统一清除段落内链接的默认边距，一劳永逸：

# 放在UI定义的最靠前位置即可
tags$style("p a {margin: 0 !important; padding: 0 !important;}")

添加后无需逐个修改链接标签，正常编写文本、手动控制需要的空格数量即可，不会再出现多余空白。

内容的提问来源于stack exchange，提问作者Jim Wright