Put text that has been split with commas onto the next line within a table cell

Question

Put text that has been split with commas onto the next line within a table cell

I am facing an issue where text with commas is splitting to the next line. To better understand, here's an example:

https://i.sstatic.net/85WnY.png

Instead, what I would like is for the text to move to the next line without splitting. Here's the desired result:

https://i.sstatic.net/gJD0x.png

Below is the code snippet I am working with:

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th width="50%;">Address</th>
    <th width="50%;">Email</th>
  </tr>
  <tr>
    <td style="">416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b757a767e5b7e767a727735787476">[email protected]</a></td>
  </tr>
</table>

Any suggestions on how I can achieve the desired output? Thank you.

html css html-table

Answer 1

Answer №1

To prevent automatic word wrapping, you can utilize the white-space: nowrap; property and manually control line breaks using line-break opportunity <wbr> tags. It's possible to create a script that inserts a <wbr> after every comma for improved wrapping.

When testing this code snippet, make sure to view the page in full and adjust the browser width to observe the differences in how text wraps between the two cells.

document.querySelectorAll('.break-at-commas').forEach(e => {
  e.innerHTML = e.innerHTML.replaceAll(',',',<wbr>')
})

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  width: 50%;
}
.break-at-commas {
  white-space: nowrap;
}

<table>
  <tr>
    <th>Break At Commas</th>
    <th>Default</th>
  </tr>
  <tr>
    <td class="break-at-commas">416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
    <td>416, Willow Brook Lane, Suite 577, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
  </tr>
</table>

Answer 2

To prevent automatic word wrapping, you can utilize the white-space: nowrap; property and manually control line breaks using line-break opportunity <wbr> tags. It's possible to create a script that inserts a <wbr> after every comma for improved wrapping.

When testing this code snippet, make sure to view the page in full and adjust the browser width to observe the differences in how text wraps between the two cells.

document.querySelectorAll('.break-at-commas').forEach(e => {
  e.innerHTML = e.innerHTML.replaceAll(',',',<wbr>')
})

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  width: 50%;
}
.break-at-commas {
  white-space: nowrap;
}

<table>
  <tr>
    <th>Break At Commas</th>
    <th>Default</th>
  </tr>
  <tr>
    <td class="break-at-commas">416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
    <td>416, Willow Brook Lane, Suite 577, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
  </tr>
</table>

Answer 3

Answer №2

If you're looking to manipulate the contents of your td using JavaScript, one option is to turn each segment into an element with a display property of inline-block. I have created a pen that demonstrates how this can be achieved: https://codepen.io/motionharvest/pen/bGOjZPx

The code in the pen splits the text by comma, wraps each segment in a span, and applies the style of display: inline-block to each segment. While there shouldn't be any extra space after the comma, feel free to check it out for yourself.

let splitElem = document.getElementById("split");
let splitElemText = splitElem.innerText;
let splittedText = splitElemText.split(",");
splitElem.innerText = "";

splittedText.forEach((segment, index) => {
    let segmentElement = document.createElement("span");
    segmentElement.innerText = segment;
    if(index < splittedText.length - 1) {
        segmentElement.innerText += ", "
    }
    segmentElement.style.display = "inline-block";
    splitElem.append(segmentElement);
})

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th width="50%;">Address</th>
    <th width="50%;">Email</th>
  </tr>
  <tr>
    <td style="" id="split">416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d7d8d4dcf9dcd4d8d0d597dad6d4">[email protected]</a></td>
  </tr>
</table>

Answer 4

If you're looking to manipulate the contents of your td using JavaScript, one option is to turn each segment into an element with a display property of inline-block. I have created a pen that demonstrates how this can be achieved: https://codepen.io/motionharvest/pen/bGOjZPx

The code in the pen splits the text by comma, wraps each segment in a span, and applies the style of display: inline-block to each segment. While there shouldn't be any extra space after the comma, feel free to check it out for yourself.

let splitElem = document.getElementById("split");
let splitElemText = splitElem.innerText;
let splittedText = splitElemText.split(",");
splitElem.innerText = "";

splittedText.forEach((segment, index) => {
    let segmentElement = document.createElement("span");
    segmentElement.innerText = segment;
    if(index < splittedText.length - 1) {
        segmentElement.innerText += ", "
    }
    segmentElement.style.display = "inline-block";
    splitElem.append(segmentElement);
})

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th width="50%;">Address</th>
    <th width="50%;">Email</th>
  </tr>
  <tr>
    <td style="" id="split">416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d7d8d4dcf9dcd4d8d0d597dad6d4">[email protected]</a></td>
  </tr>
</table>

Put text that has been split with commas onto the next line within a table cell

Answer №1

Answer №2

Similar questions

A fixed HTML div with a relative div is like having your own

What's the best way to align two elements side by side regardless of window size changes?

Navigate to the hover image with a swift roll

What steps can I take to incorporate a verification question in order to combat spam?

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

Create "people" entities using the information provided in the input fields

Achieving a Pushing Footer Design with Content

Masterful Text Pairing: Using Zen Coding Techniques for Crafting Intricate Nesting Structures

Expanding Form Fields with jQuery: A Step-by-Step Guide

The code that functions properly in Internet Explorer and Chrome is not functioning as expected in Firefox

Extract the chosen option from a dropdown menu, and then transfer it to another dropdown menu with a new corresponding value

Steps for implementing Onclick event within the <Script> tag to display a div:

Arrange elements in a vertical layout and align them to the left when they exceed the boundaries of their container

Adjusting the div's background color according to a pre-determined choice in a select menu generated by PHP

Column on the far right of the grid with a frozen position

Connecting buttons to JavaScript functions that interact with MySQL database entries

Activate radio button exclusively for admin user

Transfer a PHP variable between pages to retrieve the appropriate item from a button

The input box fails to show larger values on the user's page

Bootstrap Item Carousel - A Sleek Way to Showcase