Is there a way to implement HTML code that can automatically hide text based on the scroll size, similar to

Question

Is there a way to implement HTML code that can automatically hide text based on the scroll size, similar to

Check out your Gmail inbox, where you'll notice 3 main columns

Includes the sender's information
Contains "THE_EMAIL_SUBJECT - THE_EMAIL_BODY"
Showcases the date the email was sent on

I observed that when resizing the window in the Gmail web client, the text displayed in the second column automatically adjusts. It simply truncates the text to ensure that the sent on date appears to the right and the sender to the left. This feature is quite impressive, and I am interested in implementing it myself. Can anyone provide guidance on how to achieve this using HTML/CSS/JS?

javascript html css

Answer 1

Answer №1

Create a layout with the receiver fixed on the left side and the date hugging the right side of your window, all without using JavaScript!

<html>
<head>
    <title>SO</title>
    <style>
        #content
        {
            margin-right: 10px;
            width: 100%;
        }

        #receiver, #sender, #subject, #date
        {
            padding-right: 5px;
        }

        #receiver
        {
            width: 50px;
        }

        #sender
        {
            width: 50px;
        }

        #subject
        {
            width: 100%;
            overflow: hidden;
        }

        #date
        {
            width: 50px;
        }
    </style>
</head>
<body>
    <table id="content">
        <tr>
            <td>
                <div id="receiver">
                    Receiver
                </div>
            </td>
            <td>
                <div id="sender">
                    Sender
                </div>
            </td>
            <td id="subject">
                <div style="height: 20px;">
                    This is my long subject that hides itself when the window is too narrow.
                </div>
            </td>
            <td>
                <div id="date">
                    May 6
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

You can adjust the width of the content as a percentage or to auto, and set margins as needed.

This design ensures that if the subject is too long, it will be hidden. Keep in mind the correct order should be sender, receiver, subject, emailContent, Date. However, you get the idea.

Answer 2

Create a layout with the receiver fixed on the left side and the date hugging the right side of your window, all without using JavaScript!

<html>
<head>
    <title>SO</title>
    <style>
        #content
        {
            margin-right: 10px;
            width: 100%;
        }

        #receiver, #sender, #subject, #date
        {
            padding-right: 5px;
        }

        #receiver
        {
            width: 50px;
        }

        #sender
        {
            width: 50px;
        }

        #subject
        {
            width: 100%;
            overflow: hidden;
        }

        #date
        {
            width: 50px;
        }
    </style>
</head>
<body>
    <table id="content">
        <tr>
            <td>
                <div id="receiver">
                    Receiver
                </div>
            </td>
            <td>
                <div id="sender">
                    Sender
                </div>
            </td>
            <td id="subject">
                <div style="height: 20px;">
                    This is my long subject that hides itself when the window is too narrow.
                </div>
            </td>
            <td>
                <div id="date">
                    May 6
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

You can adjust the width of the content as a percentage or to auto, and set margins as needed.

This design ensures that if the subject is too long, it will be hidden. Keep in mind the correct order should be sender, receiver, subject, emailContent, Date. However, you get the idea.

Answer 3

Answer №2

Check out this StackOverflow post that shares similarities with your question.

You can tackle your issue by implementing a table layout, specifying the width for the rightmost column (which contains the date), and allowing overflow for the other two columns.

Answer 4

Check out this StackOverflow post that shares similarities with your question.

You can tackle your issue by implementing a table layout, specifying the width for the rightmost column (which contains the date), and allowing overflow for the other two columns.

Is there a way to implement HTML code that can automatically hide text based on the scroll size, similar to

Answer №1

Answer №2

Similar questions

css malfunctioning user interface

What is the correct way to assign a property to a function's scope?

Google Map with rounded corners that have a transparent design

SyntaxError: Encountered an unexpected token that is not jsonp, could it be trying to parse json instead?

Update the text on a Button component using ReactJS

Unique styles and scripts for a custom login portal

Separation between inline elements with a line break

Guide to transforming View Model into JSON object in ASP.NET MVC

What is the method for utilizing the onmouseover function to emphasize a specific part of an SVG graphic?

Navigate to the end of the chat window using AngularJS

Exploring the concept of String Enums through Reverse-Mapping

range input in firefox not functioning properly with focus method

Django's Models do not fetch data from the database directly

The drawbacks of using toJS() in React Redux: Is it really necessary in mapStateToProps()?

What could be the reason for the `controller.$render` method not being triggered as intended?

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

Using ReactJS to fetch data from a localhost PHP page

Leveraging Angular's capability to import files directly from the assets

What is the best way to add a trigonometric shape to a web page?

Exploring the world of HighCharts