iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): show ellipsis when text overflows in API list items (#41051) 

Previously, when an API list item's text overflowed its container, it
was just hidden. This made it often difficult to realize that there was
more text.

This commit fixes this by ensuring an ellipsis (`...`) is shown when the
text overflows.

Before: ![api-list truncated before][1]
After: ![api-list truncated after][2]

[1]: https://user-images.githubusercontent.com/8604205/109396186-0cd03300-7939-11eb-921c-00621a3889a4.png
[2]: https://user-images.githubusercontent.com/8604205/109396187-0e016000-7939-11eb-9f3b-4535be083417.png

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:48 +02:00 committed by Andrew Kushnir
parent 304a32b655
commit a926fd020b
1 changed files with 1 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
aio/src/styles/2-modules/_api-list.scss
View File

@ -130,13 +130,10 @@ aio-api-list {
a { a {
color: $blue-grey-600; color: $blue-grey-600;
display: inline-block;
@include line-height(16); @include line-height(16);
padding: 0 16px 0; padding: 0 16px;
text-decoration: none; text-decoration: none;
transition: all .3s; transition: all .3s;
overflow: hidden;
text-overflow: ellipsis;
&:hover { &:hover {
background: $blue-grey-50; background: $blue-grey-50;