Skip to content

Instantly share code, notes, and snippets.

@robertknight

robertknight/wrap.html

Created October 11, 2016 12:45
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save robertknight/cec3453c046705bfc9c8e5b8d2153b56 to your computer and use it in GitHub Desktop.
Save robertknight/cec3453c046705bfc9c8e5b8d2153b56 to your computer and use it in GitHub Desktop.
Download ZIP
Using min-width and overflow-wrap to wrap long words in flexbox layouts
Raw
wrap.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style>
.container {
display: flex;
flex-direction: row;
max-width: 100%;
}
.title {
overflow-wrap: break-word;
/*
min-width must be set explicitly to enable shrinking of `title`.
See http://stackoverflow.com/questions/36150458/flex-item-overflows-container-due-to-long-word-even-after-using-word-wrap
*/
min-width: 100px;
}
</style>
<div class="container">
<div class="title">Pitt_Comp_Literacy_Culture_Distant_Publics_Development_Rhetoric_and_the_Subject_of_Crisis.pdf,</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment