Last active
January 19, 2020 22:06
-
-
Save plugn/26c625ee141add8cb9560a38b6e6e9ea to your computer and use it in GitHub Desktop.
flex layout with text overflow in ellipsis mode. header// source https://jsbin.com/tupifec
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>header</title> | |
| <style id="jsbin-css"> | |
| .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| .flex-col { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| height: 100%; | |
| } | |
| .flex-row > .flex-row, | |
| .flex-row > .flex-col, | |
| .flex-col > .flex-row, | |
| .flex-col > .flex-col { | |
| flex: 1; | |
| } | |
| .stretch { | |
| flex: 1; | |
| } | |
| .no-stretch { | |
| flex: 0 1 auto !important; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| .ellipsis { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .whopper > div { | |
| color: #232323; | |
| background-color: #eee; | |
| padding: 2px 5px; | |
| outline: 1px dashed #aaa; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flex-row whopper"> | |
| <div class="flex-col no-stretch" style="width: 200px"> | |
| <span class="ellipsis">LOGO LOGO GOGO GOGO GOGOGO</span> </div> | |
| <div class="flex-col stretch"> | |
| <span class="ellipsis">DASHBOARD LETTERS ARE CLOSER THAN THEY APPEAR</span> </div> | |
| <div class="flex-col no-stretch" style="width: 200px"> | |
| <span class="ellipsis">RIGHT MENU</span> </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| .flex-col { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| height: 100%; | |
| } | |
| .flex-row > .flex-row, | |
| .flex-row > .flex-col, | |
| .flex-col > .flex-row, | |
| .flex-col > .flex-col { | |
| flex: 1; | |
| } | |
| .stretch { | |
| flex: 1; | |
| } | |
| .no-stretch { | |
| flex: 0 1 auto !important; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| .ellipsis { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .whopper > div { | |
| color: #232323; | |
| background-color: #eee; | |
| padding: 2px 5px; | |
| outline: 1px dashed #aaa; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| .flex-col { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| height: 100%; | |
| } | |
| .flex-row > .flex-row, | |
| .flex-row > .flex-col, | |
| .flex-col > .flex-row, | |
| .flex-col > .flex-col { | |
| flex: 1; | |
| } | |
| .stretch { | |
| flex: 1; | |
| } | |
| .no-stretch { | |
| flex: 0 1 auto !important; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| .ellipsis { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .whopper > div { | |
| color: #232323; | |
| background-color: #eee; | |
| padding: 2px 5px; | |
| outline: 1px dashed #aaa; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment