CODEWITHSUNDEEP
css
flex_
flex_

Reputation: 733

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

@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;
}
<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 :/

Upvotes: 0

Views: 891

Answers (2)

StardustGogeta
StardustGogeta

Reputation: 3406

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.

Upvotes: 1

Derek Story
Derek Story

Reputation: 9583

I would consider restructuring your html so its a bit simpler:

JS Fiddle

<div class="contentwrapper">
  <img src="http://placehold.it/300x300">
  <span class="information">
       THIS A TESTSTSTSTSTSTSTSTSTSadsssssssiodfjiojsidfjiosjdoifjosdjfoisjdfsjdfijoisdjfsfsssssssssssssss
   </span>
</div>
<div class="card-action">
  EPIC
</div>

Then, because you are already using display: table for the container, you can take advantage of display: table-caption; for the text:

span.information {
  word-break: break-all;
  display: table-caption;
  caption-side: bottom;
}

Upvotes: 1

Related Questions