Shiny UI实现项目符号后文本对齐（仿Microsoft Word格式）

Got it, let's tackle that line alignment problem you're facing! The issue here is that you're using a plain text bullet (•) inside an h4 tag, which isn't a proper list structure—so when the text wraps, it doesn't know to indent to match the bullet's position. Here are two straightforward solutions to get that Word-like list alignment:

Solution 1: Use Native HTML List Elements (Semantic & Clean) #

Shiny lets you use standard HTML list tags, which automatically handle line wrap alignment out of the box. Replace your current code with this:

fluidRow(
  tags$ul(
    tags$li(h4("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."))
  )
)

• tags$ul creates an unordered list, and tags$li is a list item. Browsers natively style list items so wrapped text lines up perfectly with the start of the first line's content, not the bullet itself.
• Bonus: If you need multiple bullet points later, just add more tags$li elements inside the tags$ul—super scalable.

Solution 2: Custom CSS for Inline Bullet (If You Don't Want a List) #

If you prefer keeping the bullet directly inside the h4 without a full list structure, use CSS to adjust text indentation and padding:

fluidRow(
  h4("• xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.", 
     style = "padding-left: 1.5em; text-indent: -1em;")
)

Here's how this works:

• text-indent: -1em pulls the first line (including the bullet) left by 1em, so the bullet sits outside the main text block.
• padding-left: 1.5em adds space to the left of the entire h4 element, creating room for the bullet. Wrapped lines will align to the start of this padded area, matching the first line's text position.
• You can tweak the 1em/1.5em values to adjust the spacing to your liking.

Either of these should give you the clean, aligned wrap you're looking for!

内容的提问来源于stack exchange，提问作者Leo Lin