Safari & VoiceOver iOS (14.3): All text is read in all examples.No way to determine what is visible and not visible. Safari (14) & VoiceOver Mac (10.14.5 Mojave): All text is read in all examples.No way to determne what is visible and not visible. Chrome (87) & Talkback (9): All text is read in all examples.The last visible line of the line-clamp version is read twice and then the non-visible remaining portion is read, but the word "under" the ellipsis is skipped. Similar with the dir=rtl version, except the screen reader's live text highlighting causes the text to scroll out of view when being read. 2004): All text of first text-overflow example is read completely but then the visible-only portion is read a second time. Chrome (87) & JAWS (2020): All text is read in all examples.Firefox (84) & NVDA (2020.3): All text is read in all examples.Let bbE = spanEllipse.getBoundingClientRect() Let firstOverFlow = text.querySelector('.wordWrpOverflow') get word/string array - unless it's aleady generated SpanEllipse = document.createElement("span") create ellpse san if not already present Let spanEllipse = text.querySelector(".spanEllipse") Let hasSpans = spanWrps.length ? true : false Let spanWrps = text.querySelectorAll(".wordWrp") The overflow "ellipsis" placeholder is placed according to some boundig box checks: the first span element leaving the overflow defined boundaries will be the position/index for prepending the ellipsis span. This time we're completely replacing the css elllipsis placeholder by appending a custom element. Pretty similar to the previous js approach – by means of splitting the element's text into span elements. Let height0 = wordWraps.getBoundingClientRect().height įor (let i = 1 i height0 & breaks Resize cards Let wordWraps = text.querySelectorAll(".wordWrp") Let maxLines = parseFloat(style.webkitLineClamp) Let style = window.getComputedStyle(text) Let height0 = span0.getBoundingClientRect().height Let span0 = document.createElement("span") get line height by checking the first word's height Let bottomText = bbText.y + bbText.height Let bbText = text.getBoundingClientRect() Let overflows = document.querySelectorAll(".overflow") spans with line breaks get a special class with a word-break: break-word property.then we check all span heights: if a span height is larger than the first instance - it contains a line break.we're splitting all words into an array of elements.Unfortunately, this will result in ugly word breaks. This hack is based on the fact word-break: break-all will render the ellipsis within the block boundaries. Hello, I'm a very long text1 for at least three lines! Hello, I'm a very long text2 for at least three lines! Max-height: calc(var(-overflowLineHeight) * 4) Max-height: calc(var(-overflowLineHeight) * 3) Max-height: calc(var(-overflowLineHeight) * 2) overflowColor2: rgba(255, 255, 255, 0) īackground-image: linear-gradient( 90deg, var(-overflowColor2), var(-overflowColor1) 50%) Hello, I'm a very long text for at least three lines!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |