What is the best way to have the text in my table cell wrap when it reaches the width of the image in the same cell?

Within the table, I have <td> elements structured like this:

<tr> 
    <td>
        <p class="tableText">Lengthy random text..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
    <td>
        <p class="tableText">Lengthy random text..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
</tr>

I am seeking a solution where the width of each <td> matches the image's width, causing the text to wrap once it reaches the image's width limit. Currently, the text just runs on beyond the image.

Any recommendations using JS/JQuery, HTML, or CSS to address this issue? (preferably html/css)

htmlcsshtml-tableword-wrap

Answer №1

Ensure that the width of the p element matches the img element since they are siblings.

td {
  border: red solid
}
img {
  display: block;
  width: 33vw
}
p {
  width: 33vw
}
<table>
  <tr>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
  </tr>
</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

What is the best way to maintain parameters in PHP form code?

I am facing an issue with a script that needs to run with a specific parameter (for example, details.php?studentid=10325). The script contains a form with the following code snippet to send form data back to the current script. However, for some reason, t ...

phphtmlpostparameters

Adjusting the size of the background image without altering the background color

I am looking to create a background with a gradient color and an overlay background image. The image is simply a transparent icon, but I need to adjust its size without altering the overall background dimensions. Any assistance on this matter would be gre ...

htmlcssbackground-image

Pictures are automatically adjusted to a resolution of 0 x 0 within the Heroku application

I have encountered an issue with my simple webpage hosted on Heroku. Despite appearing perfectly fine on localhost, 4 images are automatically resized to 0x0 when viewed on Heroku. I am struggling to identify the cause of this problem. Here is how it appe ...

htmlcssheroku

Designing a blurred and distinct margin with the hover effect in html and css

Hey there, I've been attempting to replicate the hover effect on the buttons located on the left-hand side of this site , but unfortunately, I haven't had much success. The effect seems to involve a shift in margin and an unevening of margins tha ...

htmlcssbuttonhover

Issue occurs when a circle element is not following a div element on mouse

Currently, I have implemented some jQuery code that instructs a div named small-circle to track my cursor movement. I discovered how to accomplish this by referencing a thread on stack overflow. I made slight modifications to the script to suit my specifi ...

javascriptjqueryhtmlcss

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

javascriptcssloadingmultiple-columns

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

Calculate the total value of an object using Typescript

Here is the data that I have: [Products, Products, Products, Products] 0: Products {product_id: "1", Product_type_id: "11", Subtotal:450, …} 1: Products {product_id: "2", Product_type_id: "22", Subtotal:550, …} 2: Products {product_id: ...

htmlangulartypescriptcalculator

Tips for sending parameters to XSLT using a Javascript function

Despite my efforts to find a solution in various online posts, I haven't been able to resolve the issue. The challenge lies in my HTML file that includes a JavaScript function for parsing XML and rendering XSLT. I have multiple 'records' in ...

javascripthtmlxmlxsltxml-parsing

Creating a flexible grid layout with DIVs that share equal width dimensions

Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on to ...

htmlcss

Implementing a click event to convert text to input in Angular 5

I'm struggling with setting values instead of just getting them. I want to switch from using divs to input fields and update the values when in "editMode". <div class="geim__sets"> <div *ngFor="let set of game.sets" class="geim__set"> ...

htmlangular

Ensure the validation of multiple form fields in a single function

I've implemented code to validate a form field as you input values, changing the border color to red if invalid or green if valid: function FormValidation(){ var fn=document.getElementById("firstName").value; if(fn == ""){ document.ge ...

javascriptphphtmlforms

What is causing this div to automatically assume a width of 900 pixels?

There is only one specific instance where I have set a div width to 900 px, and it is located further up the DOM within a div called #Ba. This is where the width is being derived from. My intention is for it to simply take on the width of its containing e ...

css

Numerous column pictures that occupy the entire browser screen

I am looking to create a grid of clickable images that expand to cover the width of the browser window without any space on either side. Ideally, I would like each image to be 180x180px in size, but if it's easier they can resize based on the browser ...

javascriptjqueryhtmlcss

Implement a scrolling feature to the tooltip when using "data-toggle"

I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the to ...

htmlcssasp.net-mvcbootstrap-4tooltip

aligning columns within a flexible element that has a maximum height

Within this flex element, I have set flex: column wrap; and max-height: 150px;. The issue I'm facing is that justify-content doesn't seem to be working. However, when I switch to using height: 150px, the alignment works fine. This problem arises ...

htmlcssflexbox

Can you explain the purpose of the role attribute in XHTML? How is it commonly utilized?

After reviewing W3C's information about the role attribute, I am still unclear about its purpose. Is the role attribute meant to simply clarify the code, or do some browsers or spiders interpret it in a specific way? Could the role attribute serve as ...

javascripthtmlattributesxhtml

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

htmlcssbootstrap-4

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

My website consists of a login page named login.html and an index page named index.html. I want to implement authentication so that only logged in users can access the index page. I have not set up the post method on the login HTML page. Therefore, I have ...

javascripthtmlnode.jsexpress

Turn off scroll bar to create a seamless browsing experience on your website

As I work on creating the frontend for a single-page website with seamless scrolling between divs, I'm looking to eliminate mouse scrolling altogether. I understand that using overflow:hidden; can hide scroll bars, but my goal is to make the page scr ...

javascriptjqueryhtmlcss