- From: jonjohnjohnson via GitHub <sysbot+gh@w3.org>
- Date: Tue, 28 May 2019 21:00:36 +0000
- To: public-css-archive@w3.org
```html
<div class="mete">
<span class="mete-start">When rendering this long sentence </span>
<span class="mete-end">you will often see a middle ellipsis!!!</span>
</div>
```
```css
.mete {
display: flex;
align-items: baseline;
justify-content: center;
height: 1.5em;
line-height: 1.5em;
}
.mete-start, .mete-end {
overflow: hidden;
height: inherit;
flex: 0 1 auto;
}
.mete-start {
word-break: break-all;
}
.mete-end {
white-space: nowrap;
direction: rtl;
text-overflow: ellipsis;
text-overflow: ' ...';
}
.mete-end::after {
content: '\200E';
}
```
Here's my utility used to solve this gap in the spec for a few years now. But it has the caveats that it doesn't work in webkit, misuses `direction`, and is tricky to semantically style (`em`/`strong`) text across the center boundary, but it is selectable and mostly accessible. :/
https://jsfiddle.net/t5jvns7q/
--
GitHub Notification of comment by jonjohnjohnson
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3937#issuecomment-496688096 using your GitHub account
Received on Tuesday, 28 May 2019 21:00:38 UTC