Is there any way to break every word if one does it?-CodePudding

I've got an unusual problem with breaking words in HTML. The problem is inside the grid which is nested inside another one because every element has got its own height and width. I want to have got the same measurements for every span element.

Example:

body{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px;
}
div{
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}
div > span{
  overflow-wrap: anywhere;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}

<body>
    <div>
      <span class="title">Behind Her Eyes</span>
      <span class="rate">62%</span>
      <span class="main-character">Simona Brown</span>
     </div>
    <div>
      <span class="title">White Lines</span>
      <span class="rate">68%</span>
      <span class="main-character"> Laura Haddock</span>
     </div>
    <div>
      <span class="title">You</span>
      <span class="rate">87%</span>
      <span class="main-character">Penn Badgley</span>
     </div>
</body>

If something is unclear feel free to ask :)

EDIT: As you can see words can get the different lengths. Behind Her Eyes is longer and breaks differently than others, that's why columns are not similar and I want them to have got the same length.

CodePudding user response：

You can use display:flex instead to get your desired result if I understood it correctly.

body{
  display: flex;
}
div{
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex: 1;
}
div > span {
  text-align: center;
  overflow-wrap: anywhere;
  flex-grow: 1;
  border: 1px solid black;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}

<body>
    <div>
      <span>aaaaaaaaaaaaaaasoihsidohfifpfpsdhfpofdsfsdgsdgsdgsdg</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaaaaaaaaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
</body>

If you want to have same length for both column and rows, then you can use grid-auto-rows: 1fr; using display:grid as mentioned here: Equal height rows in CSS Grid Layout

body{
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
div{
  border: 1px solid black;
  display: grid;
  grid-auto-rows: 1fr;
}
div > span{
  overflow-wrap: anywhere;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}

<body>
    <div>
      <span>aaaaaaaaaaaaaaasoihsidohfifpfpsdhfpofdsfsdgsdgsdgsdg</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaaaaaaaaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
</body>