Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add .css-truncate-overflow #978

Merged
merged 4 commits into from
Nov 8, 2019
Merged

Add .css-truncate-overflow #978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ef4dd0
Introduce .css-truncate-overflow
simurai Nov 7, 2019
e4b82a7
Update documentation
simurai Nov 7, 2019
f61e5a6
Update docs/content/components/truncate.md
simurai Nov 8, 2019
6f1cf9f
Apply suggestions from code review
simurai Nov 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 43 additions & 9 deletions docs/content/components/truncate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,52 @@ bundle: truncate
---


`.css-truncate` will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of `.css-truncate-target`. Unless the full text is so long that it affects performace, always add `title` to the truncated element so the full text can still be seen.
The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible.

```html live title="Truncate"
<span class="branch-ref css-truncate css-truncate-target" title="really-long-branch-name">
really-long-branch-name
</span>
## Truncate overflow

Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text that overflows from wrapping.

```html live
<div class="col-3">
<div class="css-truncate css-truncate-overflow border p-3"
title="branch-name-that-is-really-long">
branch-name-that-is-really-long
</div>
<div class="border p-3 mt-3">
branch-name-that-is-really-long
</div>
</div>
```

## Truncate target

Combine the `css-truncate` and `css-truncate-target` classes for inline (or inline-block) elements with a fixed maximum width (default: `125px`).

```html live
Some text with a
<strong class="css-truncate css-truncate-target"
title="branch-name-that-is-really-long">
branch-name-that-is-really-long
</strong>
```

You can override the maximum width of the truncated text with an inline `style` attribute:

```html live
Some text with a
<strong class="css-truncate css-truncate-target" style="max-width: 180px"
title="branch-name-that-is-really-long">
branch-name-that-is-really-long
</strong>
```

You can reveal the entire string on hover with the addition of `.expandable`.

```html live title="Truncate Expandable"
<span class="css-truncate expandable">
<span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
</span>
```html live
Some text with a
<strong class="css-truncate css-truncate-target expandable"
title="branch-name-that-is-really-long">
branch-name-that-is-really-long
</strong>
```
18 changes: 11 additions & 7 deletions src/truncate/truncate.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,22 @@
// css-truncate will shorten text with an ellipsis.

.css-truncate {
// Truncate double target
//
// css-truncate will shorten text with an ellipsis. The maximum width
// of the truncated text can be changed by overriding the max-width
// of the .css-truncate-target

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The diff is a bit messy with these "double selectors". 😩 Without it's:

// Both share these properties
.css-truncate-overflow,
.css-truncate-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// .css-truncate-target has these additional properties
.css-truncate-target {
  display: inline-block;
  max-width: 125px;
  vertical-align: top;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's also tempting to rename it to something like:

// Default
.Truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Modifier for inline elements
.Truncate--inline {
  display: inline-block;
  max-width: 125px;
  vertical-align: top;
}

Would require some bigger refactor on dotcom.

// css-truncate-auto will shorten text with an ellipsis when overflowing
&.css-truncate-overflow,
.css-truncate-overflow,
&.css-truncate-target,
.css-truncate-target {
display: inline-block;
max-width: 125px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

// css-truncate-target will shorten text with an ellipsis and a max width
&.css-truncate-target,
.css-truncate-target {
display: inline-block;
max-width: 125px;
vertical-align: top;
}

Expand Down