![]() The truncation is purely a render effect - the full text is still in the DOM and accessibility tree - and no meta-data is exposed in the DOM to indicate where the break is. Text truncated in this way might also fail Success Criterion 1.3.1 Info and Relationships. This is what makes it an accessibility issue, over and above the usability issue for small screen users. 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. The CSS text-overflow property can be used to show a visual indication for text that’s been clipped by its container. With line-clamp, you can contain a block of text into certain number of lines, so the text never goes out of those lines. While, in CSS, you can truncate the text to one line using text-overflow: ellipsis īut how do you truncate a multiple lines of text to make it look like this? Say you have few boxes in grid with some text inside of them and say, the amount of text is variable so the height of the blocks is uneven. I was exploring some solutions for controlling multi-line text wraps when I came across this interesting way twitter handles it. One of the challenges doing in this is, handling text. If you've used hashnode on a phone, you would know that hashnode has a very flexible UI that adapts to any screen sizes while still looking controlled and beautiful.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |