Help with code in table

[Heatherbell]

Trying to stop the words breaking mid-word here in a table in mobile view - grateful for any advice.
I added the text-break (which is probably wrong) but without it the table doesn't shrink to fit screen width
Using this code on the left column:
 echo '<td class="col-sm-3 text-break">
gives:

[♥raiwa]

Try " word-break "

[Heatherbell]

@raiwa
Many thanks but that takes the table off screen again.

[♥raiwa]

Have a look here and play with the options:

https://www.w3schools.com/cssref/css3_pr_word-break.asp

[Heatherbell]

Presuming you mean to add like:
<td class="col-sm-3 text-break" style="word-break: normal;">
which changes nothing

[♥raiwa]

<td class="col-sm-3" style="word-break: normal;">

 

[Heatherbell]

Sorry that pushes the text into one line and the table off screen again as above.
The text-break is the only way I've found so far to keep the table to mobile screen width.

[♥raiwa]

Check this resource:

https://stackoverflow.com/questions/42232954/bootstrap-4-word-wrapping-in-cards

I used this long ago and it seems bootstrap has it's own css to manage this.

[♥JcMagpie]

white-space: pre-wrap;

[Heatherbell]

Sorry neither suggestion works in this instance.
Have previously spent ages on stackoverrflow and w3schools trying suggestions just to get the product name to wrap so table shrinks to screen width but cannot find the fix for the broken words.

[♥JcMagpie]

Text needs to be in container for the text to wrap properly.

https://css-tricks.com/almanac/properties/w/whitespace/

[♥peterpil19]

Hi,

Potentially a dumb question, but do you need to use tables? Could you use bootstrap list groups or something else?

Peter

[Heatherbell]

@peterpil19
At this stage I'll give anything a go! Spent too much time on it already for what it's worth but has now just become a challenge!
I'm trying to update an old mod - have got it working on Phoenix now, just that niggly format issue to solve - it was coded with a table so have been working with that but probably, as you suggest, time for a rethink 👍

[burt]

If you can't get the table to play nicely...

Grid Layout;

<div class="row">
  <-- each -->
  <div class="col-10">
    lots of text
  </div>
  <div class="col-2">
    price
  </div>
  <!-- eof each -->
</div>

List Group;

<ul class="list-group">
  <-- each -->
  <li class="list-group-item d-flex justify-content-between align-items-center">
    lots of text
    <span>price</span>
  </li>
  <!-- eof each -->
</ul>

Of the two, the list group is less code and a bit nicer to play with.

[♥JcMagpie]

Boostrap 4 responsive tables work fine on mobile screens, you just need to produce the correct html. Stock BS table table-borderless class with no aditional css required. Text is fully responsive and wraps without any issues.