flex_ flex_ - 2 months ago 9
CSS Question

make word-break:break-all work without width?

im trying to make word-break:break-all work without width is that possible? i have tried almost every fix and nothing worked. (except when i put a certain amount of width e.g width:25ch;) however it looks terrible when the text is long. here is my code

<style>

@import 'https://fonts.googleapis.com/css?family=Open+Sans';
body{
margin:0px;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
.contentwrapper{
margin:0 auto;
padding-top: 30px;
display:table;

}
hr{
width:100%;
}
.card{
max-width: 100%;
position:relative;
transition: box-shadow .25s;
border-radius: 2px;
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)
}
.card .card-image{
position:relative;
width:100%;
}
.card .card-content{
text-transform: lowercase;
padding:20px;
border-radius: 0 0 2px 2px;
}
.card .card-action{
position: relative;
background-color: inherit;
border-top: 1px solid rgba(160,160,160,0.2);
padding: 20px;

}
span.information{
word-break:break-all;
}

</style>
<html>
<body style="background-color: rgb(242, 242, 242)";>
<div class="contentwrapper">
<div class="card">
<div class="card-image">
<img src="http://placehold.it/300x300">
</div>
<div class="card-content">
<span class="information">
THIS A TESTSTSTSTSTSTSTSTSTSadsssssssssssssssssssss
</span>
</div>
<div class="card-action">
EPIC
</div>
</div>
</div>
</body>
</html>


example of what i mean

edit:the image is dynamic thats why i cant add width to the element :/

Answer

body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.contentwrapper{
    margin: 0 auto;
    padding-top: 30px;
    display: table;

}
.card {
    transition: box-shadow .25s;
    border-radius: 2px;
    width: min-content;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)
}
.card .card-content{
    text-transform: lowercase;
    padding: 20px;
    border-radius: 0 0 2px 2px;
}
.card .card-action{
    border-top: 1px solid rgba(160,160,160,0.2);
    padding: 20px;
}
span.information {
  word-break: break-all;
}
<div class="contentwrapper">
  <div class="card">
    <div class="card-image">
      <img src="http://placehold.it/300x300">
    </div>
    <div class="card-content">
      <span class="information">
       THIS A TESTSTSTSTSTSTSTSTSTSadsssssssiodfjiojsidfjiosjdoifjosdjfoisjdfsjdfijoisdjfsfsssssssssssssss
      </span>
    </div>
    <div class="card-action">
      EPIC
    </div>
  </div>
</div>

I suggest using width: min-content to accomplish this.