Question 256630 in Html Question posted in
Some basic documentation can be found here.

Html – Push splitted text with comma to next line in table td

I need to prevent text with comma from splitting to next line. Here’s an example:

enter image description here

but instead, I want the text to move to next line if it’s splitting. Here’s the result I want:

enter image description here

Here is my code:

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>[email protected]</td>
  </tr>
</table>

How can I get the output? Thank you.

Tags:

2

Answers


  1. 0

    One method is to turn off automatic wrapping with white-space: nowrap; and then control the wrapping yourself using line-break opportunity <wbr> elements. You can use a script to replace every comma with a comma followed by a <wbr>.

    Note that when you run this snippet you will need to use the full page link and then adjust the browser width to see the differences in wrapping behaviour 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 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    One option is to manipulate the contents of your td with JavaScript to make each segment into an element that has a display property of inline-block. I made a pen that I think does close to what you’re looking for. https://codepen.io/motionharvest/pen/bGOjZPx

    The code splits the text by comma, then wraps each segment into a span, and gives it the style of display: inline-block. I’m not seeing an extra space after the comma, but hopefully this helps.

    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>[email protected]</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search