Databases
StackOverflow2013
Postsdbo
POWrapping long words in a flexible html table in Firefox
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWrapping long words in a flexible html table in Firefox
    primarykey
    data
    text
    <p>I have a table with two columns. There is a very long word in the first column. I want to have the long word wrapped.</p> <p>You might have noticed this is the same issue as <a href="https://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table">Word-wrap in an HTML table</a>. The chosen answer in that thread is to add 'table-layout:fixed', which means the column widths have to be fixed. But I need the table to stay flexible so that the second column only use enough width for its content when the content in the first column is too long to fit in one line.</p> <p>Below <a href="http://jsfiddle.net/uhZYF/" rel="nofollow noreferrer">code</a> demonstrates the issue. It works well in IE/Chrome. But in FireFox, the line is not wrapped.</p> <p>Has anyone got any ideas to work around this issue in FireFox?</p> <p><strong>Update:</strong> I just tested it in FireFox 15 Beta released 9 days before. The "word-break" is now supported by Firefox 15. But I might still need a workaround for previous versions, because it might take a while for 15 to be released and become majority.</p> <pre><code>&lt;table style="width: 100%;"&gt; &lt;tr&gt; &lt;td&gt;&lt;div style="word-break:break-all;"&gt;LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;a href='#' style="white-space:nowrap;"&gt;Action&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USInnerpeacer
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWrapping long words in a flexible html table in Firefox
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSee my answer given below.
      singulars
      1. POWrapping long words in a flexible html table in Firefox
      1. USA.K
    2. COI had the same problem, and adding "word-break:break-all;" fixed it. So if you will submit this as an actual answer, rather than just an "Update" to your original question, I will give your answer an upvote. :)
      singulars
      1. POWrapping long words in a flexible html table in Firefox
      1. USKevin Pauli
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload