How to span this text across?

Question

I have some text in a table cell in a table row that I'm trying to have the text span. The text keeps on stopping in place.

This is what I currently have:

However this is what I want:

I want the text to span all way. How would I implement this?

This is my code:

.normal-cell-styling-left-second {
  width: 350px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-middle-second {
  width: 425px;
  padding-left: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-right-second {
  width: 700px;
  padding-top: 20px;
  padding-left: 200px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'PureHeadlineRegular', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.image-placeholder5 {
  display: inline-block;
  width: 196px;
  height: 36px;
  background-color: #F1F1F1;
}

<table>
  <tr>
    <td className="normal-cell-styling-left-second">
      <span class="gray-dynamic">
      SHADOW_SPREAD_0 
    </span>
    </td>
    <td className="normal-cell-styling-middle-second">
      0 0 0px 0 rgba(0,0,0,0.12) <br></br>0 0px 0px 0 rgba(0,0,0,0.24)
    </td>
    <td className="normal-cell-styling-right-second">
      <div className="image-placeholder5"></div>
    </td>
  </tr>
  <table>

Does this answer your question? https://stackoverflow.com/questions/572298/how-to-stop-text-from-taking-up-more-than-1-line — isherwood, Jul 15 '21 at 19:00
I get the same sort of picture as you show as the desired layout when I run the snippet unless I put it onto a very narrow device - when it has to wrap around. What system/device are you using. — A Haworth, Jul 15 '21 at 19:01

score 0 · Answer 1 · answered Jul 15 '21 at 19:02

Just put it in a span like your SHADOW_SPREAD

.normal-cell-styling-left-second {
  width: 350px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-middle-second {
  width: 425px;
  padding-left: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.normal-cell-styling-right-second {
  width: 700px;
  padding-top: 20px;
  padding-left: 200px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E6E6E6;
}

.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'PureHeadlineRegular', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.image-placeholder5 {
  display: inline-block;
  width: 196px;
  height: 36px;
  background-color: #F1F1F1;
}

<table>
  <tr>
    <td className="normal-cell-styling-left-second">
      <span class="gray-dynamic">
      SHADOW_SPREAD_0 
    </span>
    </td>
    <td className="normal-cell-styling-middle-second">
    <span class="gray-dynamic">
      0 0 0px 0 rgba(0,0,0,0.12) <br>0 0px 0px 0 rgba(0,0,0,0.24)
      </span>
    </td>
    <td className="normal-cell-styling-right-second">
      <div className="image-placeholder5"></div>
    </td>
  </tr>
  <table>

score 0 · Answer 2 · answered Jul 15 '21 at 19:03

Modify the css

.table thead tr th td { 
    white-space:nowrap
}

Then use white-space-no-wrap in the table data style

<td style="white-space:nowrap;" className="normal-cell-styling-middle-second"> 0 0 0px 0 rgba(0,0,0,0.12) <br></br>0 0px 0px 0 rgba(0,0,0,0.24) </td>

score 0 · Answer 3 · answered Jul 15 '21 at 19:24

Not sure, but it looks like there is a few things about table styling you are not familiar with :

vertical-align can be used on a cell to tell if the content is to centered, aligned on top or bottom without using padding or line-height for an average alignment. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align (look farther down about table cells )
border-collapse or border-spacing can be used to avoid gaps in between cells border. see https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse & https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing might look similar but involves different behavior when drawing borders on a table.
table-layout:fixed can be used to set a fixed width to the table and the cells so they do not shrink/expand anymore. ( height cannot be set on a fixed value, table will not show scrollbars) this is the one thing to know about the table (or display:table / table-cell / ... properties) rendering behavior.
white-space can be used anywhere and you might know more about it https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Here is a snippet that could be closer to what you expect, do not hesitate to clarify your needs and misunderstandings of myself.

table{
border-spacing:0;/* or border-collapse:collapse; */
}
.normal-cell-styling-left-second {
  width: 350px;
  border-bottom: 1px solid ;
  vertical-align:top;
}

.normal-cell-styling-middle-second {
  width: 425px;
  padding-left: 60px;/* needed ?*/
  border-bottom: 1px solid ;
  white-space:nowrap;
}

.normal-cell-styling-right-second {
  border-bottom: 1px solid ;
}

.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'PureHeadlineRegular', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.image-placeholder5 {
  display: inline-block;
  width: 196px;
  height: 36px;
  background-color: #F1F1F1;
}

<table>
  <tr>
    <td class="normal-cell-styling-left-second">
      <span class="gray-dynamic">
      SHADOW_SPREAD_0 
    </span>
    </td>
    <td class="normal-cell-styling-middle-second">
      0 0 0px 0 rgba(0,0,0,0.12) <br>0 0px 0px 0 rgba(0,0,0,0.24)
    </td>
    <td class="normal-cell-styling-right-second">
      <div class="image-placeholder5"></div>
    </td>
  </tr>
  <table>

How to span this text across?

3 Answers3