Encase a table cell containing a lengthy word

I attempted to implement the solution outlined here: How to wrap table cell at a maximum width in full width table

However, I am facing difficulties in wrapping the line containing "xxxxxxxxxxxxx".

<table class="my-list table table-bordered table-hover">
    <tbody>
        <tr>
            <th>User id</th>
            <th>User name</th>
            <th>Type</th>
            <th>Id</th>
            <th>Ad content</th>
            <th>Created at</th>
        </tr>
        <tr>
            <td>66666</td>
            <td>John Smith</td>
            <td>type1</td>
            <td>99999</td>
            <td>
                <div>
                    Good content with words and real sentences.
                </div>
            </td>
            <td>2015-09-02</td>
        </tr>
        <tr>
            <td>777777</td>
            <td>Martin  Isabelle</td>
            <td>type2</td>
            <td>888888</td>
            <td>
                <div>
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </div>
            </td>
            <td>2015-09-02</td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/jfmqgh20/2/

Answer №1

new link

Updated Css Code:

table {
    width: 50%;
}
td {
    text-align: left;
    white-space: pre-wrap;
}
td div {
    white-space: nowrap;
    word-break: break-word;
    display: inline;
}

Answer №2

The best approach is to assign minimum and maximum widths to the table cell, rather than the table head.

.my-list {
    max-width: 100%;
}

th {
}

td {
    max-width: 300px;
    min-width: 150px;
    word-wrap: break-word;
}

Answer №3

Here are two options to solve the issue:

  1. Add table-layout:fixed to the table in your original code for the word-wrap css to work. Check it out on JS Fiddle here.
  2. Alternatively, you can use the word-break: break-word; css property and set the min-width of td. See the updated JS Fiddle here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to load circles on page refresh with amCharts Maps

I am experiencing an issue with the functionality of my amCharts maps. Whenever I refresh the page, the circles that are supposed to be displayed disappear. However, when I zoom in, the circles reappear. This problem has me puzzled, and I'm not sure ...

Create a CSS header with a fading background that extends horizontally to the left and right

I'm looking to create a header with a unique color transition effect - a left fade from light blue to blue, a center that is solid blue, and a right fade from blue to light blue. The header should span the full width of the page. Can anyone suggest th ...

Styling with Chemistry: CSS for Chemical Formulas

Is there a way to write multiple formulas in CSS, or is there an alternative method I should consider? I want to integrate these formulas on my quiz website for students to use. I came across some intriguing examples that could be useful: However, I am s ...

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

Creating a visually balanced footer in your webpage is essential to providing a cohesive design. Learn how to perfectly align left

Struggling to align my footer text in a straight line. As a beginner, I hope this question isn't too basic! Check it out below: https://i.sstatic.net/ZophZ.png I want those three lines to be in perfect alignment. I've been taught a grid method ...

Navigating around web pages with Python and Selenium: How to interact with non-button elements through clicking

I am currently working with Python's selenium library and trying to interact with an element that is not of the button class. My browser/web driver setup involves Google Chrome. Below is my code snippet for reference: from selenium import webdriver ...

Having difficulty decoding audio streams in Flask Socket.IO due to a file received by the Python server

Thank you for taking the time to go through this post. I have been diligently working on a project that involves capturing audio input from the client side and then sending the recorded audio to a Python server for analysis. However, I have hit a roadblock ...

Contents of the container are not displayed in a single line

What could be causing the first element not to align with the other elements in the container? I'm having trouble figuring out why this is happening. The code snippet seems to work, but when I implement it on the webpage, the alignment issue arises. W ...

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

Alerts during script execution

As I execute the script, I encounter the following warnings: Notice: Undefined variable: varName in C:\wamp\www\dash\index.php on line 38 Notice: Undefined variable: varMsg in C:\wamp\www\dash\index.php on line 38 N ...

Preserve the HTML file with all its source code intact

Looking to access a specific parameter on this webpage: . For instance, if I need to retrieve the "Topological Polar Surface Area" value. If I manually save the page using Internet Explorer, I can locate the value with these commands: cat file.html | gr ...

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

Adapting the position of a table row in AngularJS based on the

I need assistance with creating a dynamic table-row that moves to indicate the current time in a table filled with timestamps. <table> <tr ng-repeat="timestamp in timestampArray"> <td>{{timestamp}}</td> </tr> ...

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Recently, I have been exploring the YouTube Insight feature and I am intrigued by how their chart PNGs are generated. When you view the statistics for a video, the information is presented in interactive PNG images. These images seem to be entirely compos ...

Choose the tag that involves an empty text box

I have created a form that pulls data from the database and displays a list of students. However, I am facing an issue with inputting individual scores for each student. The form only allows me to insert one score, which then gets applied to all students i ...

Scrolling on an iPhone's Div

When I tried to access a website () using my iPhone and other gadgets, I encountered an issue with scrolling through the content. Clicking on the "Insight" link at the top-left corner led me to another page. On a computer, I had no trouble scrolling smoo ...

clicking the anchor will toggle the div

Here is the HTML code that I am working with: <? while($arr as $data) { ?> <td> <div> <a href="javascript:void(0)" class="status <?= $data['SUGGESTION_CD'] ?>"> <img src="images/activate.gif" /> &l ...

Ways to apply attributes to specific images using a JQuery array

I'm struggling to add attributes to multiple images using a jQuery array. Can anyone provide some assistance? <div id="result"> <img src="Image1" width="300"/> <img src="Image2" width="300"/> <img src="Image3" width="300"/> ...

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

Using Express to Deliver Static Content to Subdirectories

I am currently using Express to serve a React application that was bootstrapped with Create React App. The project has the following directory structure: |--client/ | |--build/ | | |--static/ | | | |--main.css | | | |--main.js | ...