Want words to wrap, but it’s wrapping by letter

  • Resolved jennbryant

    (@jennbryant)


    4 years, 8 months ago

    Okay. I have tried every known version of CSS to try and fix this but to no avail. What we want is for the words in the header row and all other rows to wrap so the whole table fits the area, but when I add any css to make this happen, the actual letters wrap in some of the columns instead of the words!

    1. When I inspect the table columns, I see an “element.style” with a set width. I cannot find where that width would be set or where that number comes from.
    2. I cannot seem to overwrite the thead {white-space: nowrap;} line in the parent theme (twenty-twenty) no matter what I do, and when I delete this, it breaks some words after every letter.
    3. No amount of code coddling has resulted in anything that allows the words to stay intact but break at spaces in thead.

    Please let me know if you have any suggestions!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    1. This width is actually calculated by the JavaScript code. You shouldn’t really have to change that.

    2. This should be possible with “Custom CSS” code, see below.

    3. We’ll also add CSS for that below.

    Now, first, I suggest to clean up your existing CSS a bit. Instead of targetting tables separately, you could this (as a replacement for the full “Custom CSS” that you have now):

    .tablepress {
	font-family: "Merriweather Sans";
}
.dataTables_filter {
	margin-bottom: 10px;
}
.tablepress .sorting {
	text-align: center;
}
.tablepress .sorting:hover,
.tablepress .sorting_asc,
.tablepress .sorting_desc {
	text-align: center;
	background-color: #f0eee5 !important;
}

    Then, to fix those nowrap and word-breaking issues, please append this:

    .tablepress thead {
  white-space: normal;
}
.tablepress * {
  word-break: normal;
}

    You will then find that the width of the columns will adhere to the longest words in the column. The table will then likely still be too wide for the screen. You might therefore want to look at options for making it responsive, e.g. by adding horizontal scrolling, via https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

    Thread Starter jennbryant

    (@jennbryant)

    Thank you so much for the quick response! That works beautifully for the most part; I would love to see “Name & Hyperlink” broken into
    Name &
    Hyperlink
    – but I am not sure what’s keeping it from doing that. Is there a recommended way to set the widths of those particular columns as percentages? I’d like to give the “Description” column more room if I’m able to shorten the “Name & Hyperlink” column.

    I’ll try out the plugin extension – I’m sure it will make a difference too.

    You’re the best!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    “Name & Hyperlink” is for example not wrapping like that because of the longest word “Fellowships/Postdoctoral” in that column (the “/” makes this one word, compared to e.g. a “-” which would allow the browser to add a line break).
    Unless you change that “word”, e.g. by adding a space after the “/”, I don’t see how it could get shorter, in order to decrease the column width.

    Once you are e.g. using horizontal scrolling (via the Extension), you could make the Description column wider by using

    .tablepress-id-31 .column-5 {
	min-width: 300px;
}

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Want words to wrap, but it’s wrapping by letter’ is closed to new replies.