Ways to expand the div to fit the width of the text after it has been wrapped

I need a continuous underline to stretch across the remaining width after the text wraps in a table cell.

Here is the desired effect:

https://i.sstatic.net/XNNyj.png

If the text wrapping changes, the underline width should adjust accordingly.

This is what I want displayed:

https://i.sstatic.net/kzaRW.png

This is my current code:

.uln {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: inline-block;
}
<table style="width:220px; text-align:justify">
  <tr>
    <td>
      <span>this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text.</span>
      <div class="uln">&nbsp;</div>
    </td>
  </tr>
</table>

Answer ā„–1

To create a unique effect, consider extending the underline and overlaying the text on top of it to conceal the line beneath.

.with-blank {
  position: relative;
}

.with-blank::before {
  content: '';
  position: absolute;
  bottom: 2px;
  border-bottom: 1px solid #000;
  width: 100%;
}

.with-blank span {
  z-index: 2;
  background: #fff;
  position: relative;
  padding: 0px 5px 0px 0px;
}
<table style="width:220px; text-align:justify">
  <tr>
    <td class="with-blank">
      <span>this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text.</span>
    </td>
  </tr>
</table>

Answer ā„–2

td {
  position: relative;
}

span {
  background-color: #FFF;
}

.uln {
  position: absolute;
  display: inline-block;
  width: 100%;
  bottom: 4px;
  left: 0;
  z-index: -1;
  border-bottom: 1px solid #000;
}
<table style="width:220px; text-align:justify">
  <tr>
    <td>
      <span>this is a very lengthy content. this is a very lengthy content. this is a very lengthy content. this is a very lengthy content. this is a very lengthy content. this is a very lengthy content. this is a very lengthy content. this is a very lengthy content. this is a very lengthy content.</span>
      <div class="uln">&nbsp;</div>
    </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

Are iFrames being utilized for third-party applications?

I am looking to create a web application that can be extended by other developers with their own applications. Would using iFrames, similar to how Facebook does it, be the best approach? Is this considered a good practice in web development? Are there a ...

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and Iā€™m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

Organize AngularJS ng-repeat using dictionary information

I'm dealing with a dictionary consisting of key-value pairs, which looks something like this: data = { "key1": 1000, "key2": 2000, "key3": 500 } My goal is to display this data in a table using AngularJS. One way I can achieve this is b ...

How can we link identical pages to distinct sets of data in the backend and ensure they operate effectively with their respective data?

I'm working on a project where I have a dynamic table on the front-end that gets its data from a MySQL database connected using PHP. Each row in the table has action buttons, with only a delete option for now. The styling is pretty basic as shown belo ...

Send your information without having to navigate away from the current

This is my form <form id="reservationForm" action="sendmail.php" method="post"> ... . . . . <input type="image" src="images/res-button.png" alt="Submit" class="submit" width="251" height="51px"> Here is my javascript $("#reservationForm").su ...

Ensuring one div remains in a fixed position relative to another div

I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized. #halvfjerds { width: 100%; height: 1050px; background-color ...

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

How to assign a value to a textarea element in an HTML form?

I am struggling to populate a text area with the value using this code snippet... <?php $message = $_REQUEST['message']; ?> <br/><b>Description</b><br/> <TEXTAREA NAME="message" COLS=40 ROWS=6 value="<?=$messa ...

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

Innovative Inter-Browser Link with a Distinct Shape

I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows: On the left ...

How to dynamically modify a list box with JavaScript

I have an index.html file with a select tag containing multiple options for a drop-down: <label for="edu">Education</label> <select id="edu" name="edu"> <option value="0">10th</option&g ...

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

https://i.sstatic.net/3RYY6.png I'm facing a challenge in designing a website with a unique layout that has left me puzzled. I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Ba ...

Utilizing Laravel 5.2 to showcase a video

I am currently developing in Laravel 5.2 and facing an issue with displaying a video on my view page. While I can successfully store the video in my database table, I am encountering difficulties when trying to fetch and display it. In my database table, I ...

Choosing the content within a div and inserting it into an email

I have an email sender feature on my website where users can fill out input fields and hit send, resulting in me receiving an email. The text from all the input boxes is included in the email body. Additionally, there are some generated texts in divs with ...

Click on the submenu to expand it, then simply select the desired option to navigate

I have created a toggle menu that displays a list of child elements when clicked, and hides them if clicked again. However, when a child element is clicked, I want it to navigate to the corresponding page. I am having trouble getting this functionality to ...

The HTML retrieved cannot be accessed by external JavaScript code

I've encountered a major issue. I'm using ajax to retrieve content in HTML format, but my main JavaScript file is unable to manipulate any retrieved elements - tags, classes, IDs, you name it. Is this normal? How can I work with the data once it& ...

Preventing Page Content Overflow in Semantic-ui SideNav

I am currently working on a webpage that includes a side navigation bar. I recently started using semantic-ui and its grid system, but I'm facing an issue where the content of the page flows under the side nav and gets hidden. I have tried various sol ...

How can triple nested quotes be utilized within Django templates?

Currently, I am attempting to utilize inline CSS and load an image as a background in a Django template. My goal is to include three quotes, however, I am unsure of the correct way to achieve this. Can anyone provide guidance on how to properly modify the ...

Simple steps to trigger a PHP page from a JavaScript page by utilizing express functions

Currently, I am attempting to showcase a PHP page using JavaScript with express functions. Here is an illustration of the code: var express = require('express') var app = express() app.get('/', function (req, res) { res.send(' ...