When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p>

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

And

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue ac elit consequat porttitor id sed nunc. Maecenas cursus leo et urna tristique vestibulum id sit amet turpis. Maecenas efficitur accumsan nibh, nec bibendum magna ultricies id. Duis lacus quam, interdum sit amet lacus in, dapibus convallis leo. Etiam nec metus nibh. Vestibulum ipsum nisl, ullamcorper eget dictum et, rhoncus et mi. Nunc et ligula ac lacus suscipit varius sit amet nec orci. Aliquam erat volutpat. Nulla condimentum libero ut nisl scelerisque, in fermentum augue...

In the image provided, the 'D's overflow vertically while the 'LoremIpsum' text overflows horizontally (as intended). What could be causing this issue?

https://i.stack.imgur.com/DpCNs.png

<p className = "text-md text-gray-600 w-full text-start max-h-60 overflow-y-auto break-normal"> 
</p>

These elements are contained within a div with the following classes:

w-full p-5 shadow-md rounded-md flex flex-col gap-2 items-center max-w-sm flex-shrink-0
htmlcssreactjstailwind-css

Answer №1

To resolve this issue, make sure to include the word-break property in your CSS styles. Here is an example of how you can do it:

element {
    overflow-wrap: normal;
    word-break: normal;
}

If you need more detailed information on this topic, feel free to check out this resource.

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

Issue with random pages where global header.php is not showing a specific image

I'm currently revamping a website that was originally developed using codeigniter. The backend is quite chaotic with no clear identifiers for anything. I recently updated the banner in the header.php file, adjusting the style to suit the requirements. ...

phphtmlcsscodeigniter

Insert a picture within the text input field

I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...

javascriptjqueryhtmlcss

What is the best way to distribute components with varying cell heights?

I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...

cssreactjsflexboxmaterial-ui

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

javascripthtmlcss

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

External CSS file for Demandware platform

My boss was supposed to train me this year on demandaware knowledge, but ended up quitting, leaving me in the dark. I am scheduled to attend workshops later this year, but for now I am relying on Google and stackoverflow for guidance. Currently, I am wor ...

cssstylesdemandware

Minify and group options available for asset managers specifically designed for traditional HTML websites

My primary focus is on working with the CakePHP framework and utilizing a fantastic plugin that minifies and groups selected assets into a single file, reducing the number of HTTP requests needed for the entire site. Currently, I am collaborating with des ...

jqueryhtmlnode.jscsscakephp

Show loading message on keypress using jQuery

I need assistance with a unique jQuery script for the desired functionality: While inputting text into the text field, I would like the adjacent 'Load' text to be displayed. If typing stops, the 'Load' text should change to 'Del& ...

phpjqueryhtml

What is the process for locating and displaying a database in WordPress?

I seem to be facing a challenge when it comes to developing a new functionality since I am relatively new to both WordPress and web development. My current goal is to incorporate a search feature into my project. The idea is that when a user enters a sea ...

phphtmlmysqlwordpress

Ways to retrieve the current URL in Next.js without relying on window.location.href or React Router

Is there a way to fetch the current URL in Next.js without relying on window.location.href or React Router? const parse = require("url-parse"); parse("hostname", {}); console.log(parse.href); ...

javascriptreactjsnext.jsparse-url

Tips for managing the error message "The key 'myOptionalKey' is optional in the 'myObject' type but necessary in the '{...}' type"

Issue I'm currently working on making a sortable table using a sample table component from Material-UI. I encountered an error when I included an optional key in the Data object. It seems that the type definition in the getComparator function does no ...

reactjstypescriptmaterial-ui

Color overlay on top of image background

I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches ...

jqueryhtmlcssbackground

Step-by-step guide on aligning an image to the left of text in a Material UI table column

After experimenting with inline styling, I attempted to move the images next to the text in a specific column. However, there are some rows where the images overlap or the text is positioned too far to the right, as shown in this image: https://i.stack.im ...

cssreactjshtml-tablematerial-ui

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?

I have inserted a large image onto my HTML page and to manage its size, I am displaying it within a div that allows for scrolling like a map. Using jQuery, I have placed 3 markers on the image. The issue I am facing is that when I scroll the image, the ma ...

javascriptjqueryhtmlcss

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

htmlcss

What measures can be taken to avoid the wrapping of cell table data in this particular scenario?

In this captured image : The HTML code below displays a table with various elements including an image, input fields, and dropdown menus. <div align="center"> <table cellpadding='1' cellspacing='1' width='98%' class ...

jqueryhtmlhtml-table

Tips for adjusting the location of material-ui's dialog box

Is there a way to adjust the position of the dialog when it is opened in my react app using material-ui? Currently, it always appears centered. Appreciate any help in advance! ...

reactjsmaterial-ui

Troubleshooting: ReactJS application fails to start after running serve command

After successfully installing node.js on my CentOS 7 server and then installing react, the new react app was created. Following this, running: npm start or serve -s build none of these commands seem to work in my browser. The site cannot be reached ...

node.jsreactjscentos

Steps to turn off fancybox for mobile and show the full image instead

In this scenario... I am seeking a way to deactivate fancybox functionality on mobile devices. I have already discovered one method to disable it... And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src= ...

javascriptjquerycssfancyboxfancybox-2

Enhance the functionality of your React app by making the `<Paper>` component in Material UI clickable

I'm trying to figure out how to make a Paper component clickable. I attempted to set an id property in the tag like () and then utilize the DOM to add an event listener, but it's not working. I've hit a roadblock and I'm running out of ...

javascriptreactjsmaterial-uidom-events