Long source domains should get truncated with ellipsis
Categories
(Firefox :: New Tab Page, defect, P1)
Tracking
()
People
(Reporter: Mardak, Assigned: Mardak)
References
Details
(Keywords: github-merged)
Attachments
(5 files)
Looks like some of them already have ellipsis styles but aren't actually getting truncated. Might need some explicit width or overflow hidden?
Updated•6 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Comment 1•5 years ago
|
||
Assignee | ||
Comment 2•5 years ago
|
||
Hmmmm... maybe we should just wait for bug 866102.. see upcoming attachment 9046513 [details]
Assignee | ||
Comment 3•5 years ago
|
||
I tried a local build with bug 866102 / D20115 and set:
display: -webkit-box;
-webkit-line-clamp: 4 /* or as appropriate */;
/* for source/domain */
word-wrap: anywhere;
overflow: hidden;
word-wrap causes the long domain to be wrapped and line-clamp just hides the wrapped part of the domain and inserts ellipsis.
Updated•5 years ago
|
Comment 4•5 years ago
|
||
With add support for -webkit-line-clamp https://bugzilla.mozilla.org/show_bug.cgi?id=866102 still missing in nightly, this bug should be targeted for 68
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Comment 5•5 years ago
|
||
If we take bug 1551359, we can do something like this:
diff --git a/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
--- a/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
+++ b/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
@@ -44,6 +44,6 @@ export class DSCard extends React.PureComponent {
<div className="info-wrap"
- data-total-lines="6"
+ data-total-lines="7"
ref={clampTotalLines}>
- <p className="source">{this.props.source}</p>
+ <p className="source clamp" data-clamp="1">{this.props.source}</p>
<header className="title clamp" data-clamp="4">{this.props.title}</header>
diff --git a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
--- a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -93,3 +93,4 @@ $excerpt-line-height: 20;
.source {
margin-bottom: 2px;
+ word-break: break-all;
}
Assignee | ||
Updated•5 years ago
|
Comment 6•5 years ago
|
||
Updated•5 years ago
|
Assignee | ||
Comment 7•5 years ago
|
||
Updated•5 years ago
|
Comment 8•5 years ago
|
||
I have verified that ellipses appear in all parts of the cards, domain, title, and description on the latest Firefox Nightly 68.0a1 (Build ID 20190519213707) on Windows 10, macOS 10.14, and Arch Linux 4.14.3.
Updated•5 years ago
|
Updated•5 years ago
|
Description
•