Content overflow css1/13/2024 ![]() ![]() Showing the same list in a 1280px viewport at 400% zoom So users who need large text to read effectively, such as people with low vision or a cognitive disability, may lose text content simply because of that need. a 320px viewport at 100% zoom is functionally identical to a 1280px viewport at 400% zoom). However responsive layouts designed for small viewports also apply to larger viewports when viewed at high zoom (i.e. It only works for single-line text, and can’t be used to truncate a multi-line paragraph. The idea is that it can be used for containers with limited dimensions, so that single-line text within it doesn’t overlap the container in smaller viewports. ![]() This character (or whatever characters are specified) is included in the overall line-box limit, so the visual indicator itself further reduces the space available for the text, though only slightly. The property value ellipsis is the most commonly used, and renders an ellipsis character ( …) at the point of truncation, as you’d expect. Showing text-overflow with a width-constrained list in a 640px viewport So it’s used in combination with other properties that restrict and clip the boundaries of a container, typically width or max-width combined with overflow: hidden.Īnd here’s an example of what that can look like when it takes effect: The text-overflow property itself does not truncate text, it only specifies how the truncation should be indicated when it does occur. If text has been truncated with text-overflow, then this is a loss of content, and therefore an instant failure of 1.4.10.Īlthough the article concedes the possibility of valid use cases, I would personally go a step further and say there are none - that text-overflow should never be used. Horizontal scrolling content at a height equivalent to 256 CSS pixels.Įxcept for parts of the content which require two-dimensional layout for usage or meaning.Vertical scrolling content at a width equivalent to 320 CSS pixels.So I was very pleased to see someone else flying the same flag.Ī recent article by Eric Eggert is quite critical of this property, since using it in web content can cause it to fail Success Criterion 1.4.10 Reflow:Ĭontent can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: ![]() I’m not a fan, and take every suitable opportunity to discourage people from using this property though I rarely get enthusiastic support on that point.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |