Skip to content

Instantly share code, notes, and snippets.

@nksm

nksm/flex-direction-と-text-overflow.markdown

Created February 23, 2015 13:20
Show Gist options
  • Save nksm/04a3361fb8626ba9b8a4 to your computer and use it in GitHub Desktop.
Save nksm/04a3361fb8626ba9b8a4 to your computer and use it in GitHub Desktop.
Download ZIP
flex-direction と text-overflow
Raw
flex-direction-と-text-overflow.markdown

flex-direction と text-overflow

flex-direction: column; を指定すると、text-overflow が効かないケースがある

A Pen by nakashima akira on CodePen.

License.

Raw
index.jade
.container
.text あかさたなあかさたなあかさたなあかさたな
.text あかさたなあかさたなあかさたなあかさたな
.container.container--column
.text あかさたなあかさたなあかさたなあかさたな
.text あかさたなあかさたなあかさたなあかさたな
.container.container--row
.text あかさたなあかさたなあかさたなあかさたな
.text あかさたなあかさたなあかさたなあかさたな
Raw
style.scss
@import "compass/css3";
.container {
display: flex;
align-items: center;
justfy-content: center;
width: 200px;
padding: 50px;
border: 1px solid #000;
&--column {
flex-direction: column;
}
&--row {
flex-direction: row;
}
}
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment