Tips for ensuring that lengthy text remains within the confines of a table td by implementing CSS styling

What is the best way to ensure that 10,000 characters will fit inside a <td> without overflowing?

I've experimented with various solutions such as:

  • word-wrap: break-word
  • overflow-wrap
  • white-space: initial

...and several others, but nothing seems to be effective:

.a {
  white-space: nowrap; 
  width: 250px; 
  word-wrap: break-word;
  border: 1px solid #000000;
}

table,
th,
td {
   border: 1px solid black;
}
<table>
  <tbody>
    <tr>
    <td colspan="5">
        SOME STUFF
      </td>
      <td>
        <div>A</div>
        <div>A-text</div>
      </td>
      <td>
        <div>B</div>
        <div>C-text</div>
      </td>  
      <td>
        <div>C</div>
        <div>C-text</div>
      </td>        
    </tr>
    
    <tr>
      <td colspan="8">
        <div class="a">
        
abcedfghijklmnopqrstuvwxyz (repeated 50 times) 
        
        </div>
      </td>
    </tr>
    
  </tbody>
</table>

Answer №1

Setting white-space to nowrap stops text from wrapping onto multiple lines:

nowrap

Similar to normal, but prevents line breaks in the text.

To make the text fit within the cell, add both word-break: break-word and white-space: normal, or remove this property entirely as normal is default:

body {
  font-family: monospace;
}

.a {
  width: 300px; 
  word-wrap: break-word;
  background: yellow;
  
  /* For text selection inside the table: */
  overflow: hidden;
}

table {
  border-collapse: collapse;
  border: 3px solid black;
  margin: 0 auto;
}

th,
td {
  border: 3px solid black;
  padding: 4px;
}
<table>
  <tbody>
  
    <tr>
      <td>
        SOME STUFF
      </td>
      <td>
        <div>A</div>
        <div>A-text</div>
      </td>
      <td>
        <div>B</div>
        <div>C-text</div>
      </td>  
      <td>
        <div>C</div>
        <div>C-text</div>
      </td>        
    </tr>

    <tr>
      <td colspan="4">
        <div class="a">
        
abcedfghijklmnopqrstuvwxyz (... continues) ... 

        </div>
      </td>
    </tr>

  </tbody>
</table>

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

I found it challenging to select a particular choice using Selenium in Python

My goal is to use Selenium and Python to select the "Yazar" option within this particular HTML tag. However, I have encountered a problem where I am unable to successfully click and choose the "Yazar" option. Can anyone provide guidance on how to achieve t ...

Personalize the appearance of BeautifulSoup's prettify function based on the specified tag

Is there a way to customize the prettify function to prevent it from adding new lines to specific tags? I want to keep span and a tags from splitting up, like this: doc="""<div><div><span>a</span><span>b</sp ...

Tips for embedding HTML code within {{ }} in Django templates

I'm curious about how to incorporate HTML within {{ }}: {{ article.tags.all|join:", " }} This code snippet returns tags separated by commas, for example: sports, cricket, nature, etc. What I would like to achieve is: {{ <span class="label"&g ...

Failure to correctly apply CSS to Angular custom components causes styling issues

I have been working with a custom component and I have incorporated several instances of it within the parent markup. When I apply styles directly within the custom component, everything works as intended. However, when I try to set styles in the parent co ...

What's the best way to prolong the duration of a CSS animation?

I have a code snippet here that is designed to style a button when it is clicked and then maintain the style even after the click for a more aesthetically pleasing look. I'm wondering if there might be another approach to achieve this effect? Thanks! ...

Change the color of the text in a shiny dashboard

While exploring shiny dashboard, I came across this link that explains how to modify colors in the sidebar and header. However, I'm struggling to change the font color for sidebar items. The default white font color becomes unreadable when using light ...

Tips for controlling image sizes on larger devices while maintaining the appearance on Retina displays

I've been searching on the internet, but I got lost in complex explanations. I thought maybe someone here could help me out. :) I have a website with both mobile and desktop versions. Most of it looks good on different devices but there are some elem ...

Mapping JSON data containing a collection of objects as an observable, rather than as an observable array, is an

When developing my webpage, I needed to receive a viewmodel of a user account via Json. The data includes essential user details such as real name and email address. Additionally, I wanted to display (and modify) the groups that the user belongs to, along ...

Table created by Javascript is malfunctioning

Is there an obvious mistake to be found? Why isn't the Javascript generated table from the showResults function displaying on my HTML page? This issue always arises when I need to include a large number of literal values... I would also welcome feedba ...

Display detailed images upon hovering

Top of the morning to everyone. I'm in search of a way to display higher resolution images when hovering over lower resolution ones. I want to create a rule or function that can handle this dynamically without manually adding hover effects and changi ...

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

Is it possible to include both the value and text of a dropdown in form.serialize?

For my project, I need to serialize the form data. However, when it comes to dropdowns, only the values are captured and not the text of the selected option. <select name='attend'> <option value="1" selected="selected">Question&l ...

What's causing my React app's slideshow to malfunction?

Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the des ...

Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these thi ...

Aligning msform using CSS

Can someone assist me with centering the form (#msform, #msform fieldset) on all browsers while also keeping the image within the border and ensuring that the form does not extend beyond the right border? JSFiddle #msform { width: 1200px; margin: ...

When using the if-else statement to check the typeof value, it is returning as undefined

update Hello, I conducted a test on your code and found that it breaks for another scenario when the mobileVersion is set as sample.pdf. In this case, I am getting skyCloudmageProfilePic as pdfProfilePic without removing the typeof condition. Here is the ...

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

Learn how to show an image within a textview on an android device

How can I show an image for HTML in a text view? Check out the resource below <blockquote>小浪观剧团:<p>【郭德纲《今夜有戏-济公传》】@北京德云社 15周年庆@郭德纲 相声专场演出,最新一季《济公传》, ...

Utilize background-size:cover and incorporate text in a horizontally scrolling webpage

Struggling to create a minimalist HTML layout with a horizontal scrollbar, featuring a large image on the left and a lengthy text with columns on the right? I suspect the issue lies in the implementation of position:relative with float, as well as position ...