``Is there a way to use CSS to break after a certain number of characters

I'm trying to break my table cell every 20 characters, but so far I've been unsuccessful.

After some research, I discovered the ch unit in CSS that can help me set a maximum width like this:

td {
    max-width: 20ch;
}

However, simply setting the max-width does not automatically break or wrap my strings. Even when I tried using word-wrap: break-word, it didn't solve the issue.

td {
    max-width: 20ch;
    word-wrap: break-word; /* does not work */
}

It's worth noting that most of my cells contain strings without spaces. This might be important information for finding a solution.

EDIT

Apologies for the delayed edit, but I realized that the <table> element had the css attribute white-space: nowrap; applied by the table library. This was preventing word-wrap: break-word; from working properly.

htmlcsshtml-tablecss-tables

Answer №1

Unit ch operates differently.

This represents the width, specifically the advance measure, of the glyph "0" (zero, Unicode character U+0030) in the font of the element. Source: mozilla

It indicates that it will calculate the width of '0' (based on the font) and then multiply it by a value (20 times in this case). This means you can fit "0" 20 times within the space. However, it will not automatically break after every 20 characters. Breaking a word after 20 characters solely through css is not achievable unless all characters have equal widths. To accomplish this, you would need something programmable like PHP or JavaScript.

Answer №2

If you want to ensure that all characters in your text render at the same width and allow word wrapping, consider using a monospace font with the CSS property word-wrap: break-word. However, in this snippet, the use of 20ch results in 16 characters for some reason. To fix this issue, try setting the maximum width to 24ch instead:

td {
  font-family: monospace;
  border: 1px solid #ddd;
  max-width: 24ch;
  word-wrap:break-word;
}
<table>
  <td>
    oiuhncoiuhOOSFwrevi987OINDVouhnweoriuhneaörlvjneriunONVWöoiunoiSAJunwrvwoiunVA
  </td>
</table>

Answer №3

td {
  border-style: solid;
  max-width: 20ch;
  word-wrap:break-word;
}
<table>
  <td>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </td>
</table>

Does this align with your thoughts?

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

Discover the Names of Elements associated with the identical Input File tag

Having a bit of trouble with my jQuery code here. I've got two HTML input file elements with different names. How can I retrieve the name of the second input file using jQuery? Below is my HTML markup: <input type="file" name="photo_a" /> &l ...

javascriptjqueryhtml

The leaflet map I created is not showing up on my website for some reason

I am currently working on a project using ReactJS and NextJS. One issue I am facing is that my leaflet map is not filling the entire parent div on my page, and it is not showing up at all. I had expected the map to automatically adjust to the parent div s ...

cssreactjsleafletnext.js

What is the method for altering the appearance of grid columns with javascript?

What modifications do I need to make in JTML and Javascript? var opac; function checkfun() { opac=(Array.from(document.querySelectorAll('input[type="checkbox"]')) .filter((checkbox)=>checkbo ...

javascripthtmlcss

Sass list of Bootstrap version 4 grid dimensions

I'm attempting to integrate Bootstrap v4 variables into my project, which are contained within an array (_variables.scss): $grid-breakpoints: ( xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px ) !default; How can I reference it in my SAS ...

csstwitter-bootstrapsassbootstrap-4

Guide to importing an external JSON file into a JavaScript-based quiz on an HTML webpage

I am currently diving into the world of JavaScript and trying my hand at creating a quiz. Check out my simple quiz here Here are my specific inquiries: Is there a way to save the questions and answers in an external JSON file? Can I use a different fil ...

javascripthtmljson

A Guide on Integrating a Javascript Reference into HTML while Displaying a PHP Object

Our website relies heavily on PHP modules to generate objects that are essential for constructing our web pages. Some of the key modules we have include: Anchor (ahref) Button CheckBox ComboBox DateTime Email Label Note Password Phone RadioButton RichTe ...

javascriptphpjqueryhtml

move div upwards from the bottom

Within my HTML page, I have a centered div that measures 640x480. I am looking to create another div that appears from the bottom edge of the original div, with dimensions of 640x400. This means only the top 80px of the original div will be visible. I&apo ...

jqueryhtmlcss

Failed to successfully sort several distinct lists using the ng2-dnd sorting library

Recently, I came across a fantastic drag-and-drop library on GitHub that I decided to use. In my current project, I have created a view with three different buttons, each revealing a list when clicked at the same position but not simultaneously. However, ...

javascripthtmltypescriptangularangular2-routing

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

javascriptjqueryhtmlcssslider

What could be causing the Bootstrap collapse feature to malfunction?

<nav id="na-vrh" class="navbar navbar-expand-lg navbar navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> < ...

htmlbootstrap-5

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Is there a way to have the Bootstrap 5 tab-pane automatically switch between tabs at set intervals, similar to a Carousel? I found a code snippet on this link, but it appears to be outdated and only works for Bootstrap 3. Could someone assist me in updati ...

javascripthtmljquerybootstrap-5

Equal Sized <li> elements within Bootstrap Cards

I've been working with the following "template", and there are multiple cards like this on the settings page I'm currently developing. <!-- Card template --> <div class="card mt-3 shadow-sm"> <div class="card-hea ...

htmlcsstwitter-bootstrapbootstrap-5

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

Tips for displaying scroll bars in Android's WebView

Can scrollbars be displayed for scrollable html elements in an Android WebView? If so, what is the process to achieve this? ...

androidhtmlandroid-webview

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

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

htmlcssreactjshovermouseleave

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

jqueryhtmlanimationcss

Designing HTML Emails Using Nested Tables

Why is my text-decoration="none" not displaying properly? I have tried placing it in various locations like table, tr, td, but I am unable to make it work. Are there any common mistakes when styling email designs? Here is the code snippet: <table cel ...

htmlhtml-tablenestedhtml-email

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2

Having issues with RTL on MuiTextField when using special characters

Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the righ ...

cssreactjsmaterial-ui

Modifying selections within a select box generated dynamically using JQuery

Looking for help on how to delegate to a static DOM element in my current situation. I need to create a dynamic select box .userDrop when .addNew is clicked, and then have the user select an option from #secDrop, triggering a change event that calls the da ...

javascriptjqueryhtmldom