How do you prevent text from wrapping in a CSS container?

How do you prevent text from wrapping in a CSS container?

• A. By using `text-wrap: none;`
• B. By using `white-space: nowrap;`
• C. By using `overflow: hidden;`
• D. By using `line-height: normal;`

Answer: (B)

To prevent text from wrapping in a CSS container, using `white-space: nowrap;` is the most effective method. This CSS property controls how white spaces inside an element are treated. When set to `nowrap`, it ensures that the text will be displayed on a single line and will not break onto a new line regardless of the container's width. This is particularly useful in scenarios where you want to maintain a single-line layout, such as in buttons or navigation menus. Other approaches might manipulate the appearance of the text, but they do not achieve the same result. For instance, while `overflow: hidden;` can hide text that expands beyond the boundaries of its container, it does not stop the wrapping behavior itself. Similarly, `line-height: normal;` affects the spacing between lines of text but does not influence whether the text wraps within its container. The option of `text-wrap: none;` is not a standard CSS property, which makes it ineffective for controlling text wrapping in this context.

To prevent text from wrapping in a CSS container, using white-space: nowrap; is the most effective method. This CSS property controls how white spaces inside an element are treated. When set to nowrap, it ensures that the text will be displayed on a single line and will not break onto a new line regardless of the container's width. This is particularly useful in scenarios where you want to maintain a single-line layout, such as in buttons or navigation menus.

Other approaches might manipulate the appearance of the text, but they do not achieve the same result. For instance, while overflow: hidden; can hide text that expands beyond the boundaries of its container, it does not stop the wrapping behavior itself. Similarly, line-height: normal; affects the spacing between lines of text but does not influence whether the text wraps within its container. The option of text-wrap: none; is not a standard CSS property, which makes it ineffective for controlling text wrapping in this context.