58974

word-wrap in a CSS grid [duplicate]

<div class="question-status question-originals-of-duplicate">

This question already has an answer here:

    <li> Prevent content from expanding grid items <span class="question-originals-answer-count"> 1 answer </span> </li> </ul>

    word-wrap: break-word doesn't work in a grid.

    For tables there is table-layout: fixed, what is the equivalent for grids?

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    <div style="background: #e3e3e3; width: 75%;">
    
     <div style="word-wrap: break-word;">
       normaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldiv
     </div>
     
     <table>
       <tr><td style="word-wrap: break-word;">
         badtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtable
       </td></tr>
     </table>
     
     <table style="table-layout: fixed; width: 100%;">
       <tr><td style="word-wrap: break-word;">
         fixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtable
       </td></tr>
     </table>
     
     <div style="display: grid;">
       <div style="word-wrap: break-word;">
         griddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddiv
       </div>
     </div>
    
    </div>
    
    
    

    Answer1:

    You cant use it in td but you can add another div inside td. However, you have to give some width to break the words.

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

        <div style="background: #e3e3e3; width: 75%;">
    
             <table>
               <tr><td>
                <div style="width:200px;word-wrap: break-word;"> badtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtable
                </div>
               </td></tr>
             </table>
    
          <div style="display: grid;">
            <div style="word-wrap: break-word;width:200px;">     griddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddiv
          </div>
          </div>
    
            </div>
    
    
    

Recommend

  • How to calculate the highest score when taking a path through a grid?
  • Given the square grid coordinates, how to calculate the data from a different table that falls under
  • how to add horizontal scroll bar to a panel In ExtJs?
  • Delphi XE3, ugly StringGrid's borders
  • How to fallback to entirely different index page if user has javascript disable?
  • Best HTML5 structure for a layout where the title/header is outside the article tag
  • How to make SASS put relative paths in its output
  • Converter from SAT to 3-SAT
  • Changing media screen makes div overlay
  • Reading space separated values file in c++ error
  • How to populate html table with info from list in django
  • Excel VBA How to populate a multi-dimensional (3d) array with values from multiple excel ranges?
  • Prevent page break in text block with iText, XMLWorker
  • Shouldn't else be indented in the below code
  • Consuming a WCF service in a Java Client using wsHttpBinding
  • WPF version of .ScaleControl?
  • Azure table store snapshot/backup capability
  • Bigquery event streaming and table creation
  • Bash if statement with multiple conditions
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • Tamper-proof configuration files in .NET?
  • MonoTouch: How to download pdf incrementally as indicated in the Apple slides “Building Newsstand Ap
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • How can I sort a a table with VBA with given text condition?
  • $wpdb not working in file of WordPress plugin
  • Linq Objects Group By & Sum
  • RectangularRangeIndicator format like triangular using dojo
  • Large data - storage and query
  • Do create extension work in single-user mode in postgres?
  • Delete MySQLi record without showing the id in the URL
  • align graphs with different xlab
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Unanticipated behavior
  • Comma separated Values
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Trying to get generic when generic is not available
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?