Heatherbell Posted September 19, 2019 Share Posted September 19, 2019 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: Link to comment Share on other sites More sharing options...
♥raiwa Posted September 19, 2019 Share Posted September 19, 2019 Try " word-break " About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
Heatherbell Posted September 19, 2019 Author Share Posted September 19, 2019 @raiwa Many thanks but that takes the table off screen again. Link to comment Share on other sites More sharing options...
♥raiwa Posted September 19, 2019 Share Posted September 19, 2019 Have a look here and play with the options: https://www.w3schools.com/cssref/css3_pr_word-break.asp About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
Heatherbell Posted September 19, 2019 Author Share Posted September 19, 2019 Presuming you mean to add like: <td class="col-sm-3 text-break" style="word-break: normal;"> which changes nothing Link to comment Share on other sites More sharing options...
♥raiwa Posted September 19, 2019 Share Posted September 19, 2019 <td class="col-sm-3" style="word-break: normal;"> About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
Heatherbell Posted September 19, 2019 Author Share Posted September 19, 2019 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. Link to comment Share on other sites More sharing options...
♥raiwa Posted September 19, 2019 Share Posted September 19, 2019 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. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥JcMagpie Posted September 19, 2019 Share Posted September 19, 2019 white-space: pre-wrap; Link to comment Share on other sites More sharing options...
Heatherbell Posted September 19, 2019 Author Share Posted September 19, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted September 19, 2019 Share Posted September 19, 2019 Text needs to be in container for the text to wrap properly. https://css-tricks.com/almanac/properties/w/whitespace/ Link to comment Share on other sites More sharing options...
♥peterpil19 Posted September 20, 2019 Share Posted September 20, 2019 Hi, Potentially a dumb question, but do you need to use tables? Could you use bootstrap list groups or something else? Peter CE PHOENIX SUPPORTER Support the Project, go PRO and get access to certified add ons Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design. Download the latest version of CE Phoenix from gitHub here Link to comment Share on other sites More sharing options...
Heatherbell Posted September 20, 2019 Author Share Posted September 20, 2019 @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 👍 Link to comment Share on other sites More sharing options...
burt Posted September 20, 2019 Share Posted September 20, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted September 20, 2019 Share Posted September 20, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.