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

I would appreciate it if someone could clarify how the rendering process occurs in React in this specific scenario

let visitor = 0; function Mug({name}) { visitor = visitor + 1; console.log(name, visitor); return <h2>Coffee mug for visitor #{visitor}</h2>; } return ( <> <Mug name={"A"}/> <Mug name={"B&qu ...

javascriptreactjsrender

The ClerkProvider service is currently experiencing issues, leading to the blockage of third-party cookies

While implementing ClerkProvider in my Next JS project, I have encountered an issue. Despite wrapping my layout.js file in the provider, there seems to be no change. Ideally, when accessing a private route, it should prompt for authentication after redirec ...

reactjsnext.jsgoogle-oauthclerk

Tips on altering the input content in React Js?

I am currently working on developing a component for my application where I want to create a button that, when clicked, opens an input field. After entering text into the input field and clicking the button again, another input field should appear, and so ...

javascriptreactjsinputreact-hooksdefault-value

`Animate your divs with slide in and slide out effects using

Currently, I am in the process of replicating a website and facing some challenges. This site is my inspiration for the project. I have managed to create a sliding effect using CSS, making the div slide in and out from the same direction. However, I want ...

javascripthtmlcss

Click on a div in AngularJS to be directed to a specific URL

I'm currently working on developing an Angular mobile app and I want to be able to navigate to a specific URL, like www.google.com, when a particular div is clicked. Unfortunately, I'm still new to the world of Angular and struggling to achieve t ...

javascripthtmlangularjs

Material-ui retains the original style when a MenuItem is selected

In my current setup, I have applied a style of background-color: red; to the MenuItem that is marked as selected={true}. Additionally, when hovering over any other MenuItem, the background-color changes to green. However, if I hover over the MenuItem tha ...

reactjsmaterial-ui

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...

cssangularkendo-uikendo-treeview

Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars. The vertical scroll bar should only navigate throu ...

htmlcsshtml-table

The Homescreen.js file is not showing up as expected on the localhost/home page and is not displaying

Struggling to showcase the rooms on my hotel reservation website. Can't seem to crack it. Need some assistance, please. Spent a good 3 hours trying to figure this out. Snippet from My Homescreen.js import React ,{useState, useEffect, } from &apo ...

javascriptnode.jsreactjsreact-bootstrap

Retrieving properties of objects using HTML Select

Scenario: I encountered an issue while trying to access a specific property (code) of a ng-Model object called myRide. I initially attempted to achieve this by <select ng-model = "myRide" ng-change = "getCode(myRide.code)"> ...and within the ...

htmlobjectangularjs

The React application is unable to communicate with my Express application in a production environment, despite functioning properly during development

Currently, I am attempting to make a basic get request to my express backend located at mywebsite.com/test. The expected response from the server should be {"test": "test"}. While this is working perfectly fine in development on localho ...

javascriptnode.jsreactjsexpressvps

What is the reason the useEffect hook does not function properly with a state variable within context?

Check out my code here. I'm trying to display the content of the array testingData, but it's not showing up. If I remove the useEffect hook, it works fine. Can you help me understand why and how to fix it? ...

javascriptreactjs

Leverage the `dispatch` hook within a useEffect function

When it comes to triggering an action upon the React component unmounting, I faced a challenge due to hooks not allowing the use of componentWillUnmount. In order to address this, I turned to the useEffect hook: const dispatch = useDispatch(); useEffect(( ...

javascriptreactjs

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

javascripthtmlcss

What is the material-ui component that mirrors the functionality of <input type="color"><datalist>?

I'm just starting out with javascript, react, and Material-UI, so my question (along with the code sample) might show my lack of experience. Within a Material-UI TableCell (not a form), I have the following code: <input type="color" name ...

javascripthtmlreactjsmaterial-ui

The issue of the Home Page overlapping with another page persists, despite implementing precise width specifications when utilizing React Router

I am currently facing an issue with routing to a new component called upload.js in my React application. I am using the exact attribute to hide other components on the homepage when navigating to the Upload page. However, instead of properly redirecting to ...

reactjsreact-router

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

The welcome page remains visible even after the timeout period has elapsed

Upon the initial visit to the site, only the welcome page should be displayed To achieve this, I implemented the useEffect hook which utilizes LocalStorage and a setTimeout function to manage the visibility of the greeting message. const [sh ...

reactjsreact-hookslocal-storagesettimeout

The jspdf function is not displaying any images in the PDF file

I am new to coding and encountered an issue when trying to download images in reactjs. After clicking the download button, I only receive a blank pdf file. https://i.stack.imgur.com/0XJcC.png The function in my react code that attempts to generate the p ...

javascripthtmlreactjsimage-processingjspdf

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

javascriptcssreactjscss-animations