Which CSS property combination is typically used to truncate long text with an ellipsis?

Which CSS property combination is typically used to truncate long text with an ellipsis?

• A. display: block; overflow: scroll
• B. overflow: hidden; text-overflow: ellipsis; white-space: nowrap
• C. overflow: visible; text-overflow: ellipsis
• D. overflow: auto; text-overflow: ellipsis; white-space: normal

Answer: (B)

Truncating long text with an ellipsis in CSS relies on keeping the text on a single line, clipping the rest, and displaying an ellipsis to indicate there's more content. This is achieved by using a combination of white-space: nowrap to prevent wrapping, overflow: hidden to clip any overflowing text, and text-overflow: ellipsis to render the ellipsis. When the text exceeds the container width, the browser hides the extra characters and replaces them with “...,” making the single-line truncation clear. The other patterns either allow wrapping, show scrollbars, or don’t clip content properly, so they won’t produce the ellipsis in the same way.

Truncating long text with an ellipsis in CSS relies on keeping the text on a single line, clipping the rest, and displaying an ellipsis to indicate there's more content. This is achieved by using a combination of white-space: nowrap to prevent wrapping, overflow: hidden to clip any overflowing text, and text-overflow: ellipsis to render the ellipsis. When the text exceeds the container width, the browser hides the extra characters and replaces them with “...,” making the single-line truncation clear. The other patterns either allow wrapping, show scrollbars, or don’t clip content properly, so they won’t produce the ellipsis in the same way.