What does do?
Understanding the HTML Entity
stands for 'non-breaking space' in HTML. It is used to insert a space that will not be collapsed by the browser or cause a line break.
- 1
It creates a space that is preserved in the browser, unlike regular spaces which may be collapsed.
- 2
Useful for formatting content where extra spacing is needed.
- 3
Can be used multiple times to create wider gaps between words or elements.
In short: Use to add a non-breaking space in HTML, which ensures that the space is displayed as intended and prevents automatic line breaks.
Scenario Questions
- 1
We have a pricing badge that displays 'Price: $100'. On mobile screens, the '$100' sometimes wraps to a new line, leaving 'Price:' alone on the first line. How would you fix this in the HTML so they always stay together on the same line?
- 2
You are building a simple contact form and want to put exactly three spaces of visual padding between a label and an input using only HTML, without writing any CSS. How would you achieve this, and why does typing regular spaces in your HTML file not work?
- 1
A developer on your team used multiple ' ' entities to align some icons and text in a navigation bar. On smaller viewports, this is causing horizontal scrolling and layout breakage. How would you refactor this component to use modern CSS, and what are the trade-offs of using HTML entities for layout?
- 2
We're pulling dynamic product titles from an external API. Some titles contain multiple ' ' characters, which is causing long titles to overflow their cards instead of wrapping naturally. How would you debug this, and how would you handle this formatting issue programmatically?
- 1
We are designing a globalized design system component for rendering localized currencies and physical units (e.g., '10 000 €' in French, '10,000 USD' in English). How would you architect this component to handle non-breaking spaces across different locales, and how do you ensure screen readers don't misinterpret these characters?
- 2
In our React application, we noticed that copy-pasting text containing non-breaking spaces from our UI into external text editors causes search issues for users because the spaces aren't standard spaces. How would you address this usability issue while maintaining the visual layout integrity?
Follow-up Questions
- ❓How do screen readers typically interpret consecutive non-breaking spaces used for visual layout?
- ❓Under what circumstances would you prefer the CSS 'white-space' property over hardcoded HTML entities?
- ❓What happens when a user copies text containing non-breaking spaces from your website and pastes it into a terminal or search bar?