width restriction to only accommodate on two lines

Question

width restriction to only accommodate on two lines

Whether my text is short or long, I always want to ensure that it remains within two lines by defining the width of my div.

Short Text

+-------------------------+
| Short text goes here |
| Short text goes here |
+-------------------------+

Long Text

+----------------------------------------------+
| Long text goes here long text goes here long |
| text goes here long text goes here long text |
+----------------------------------------------+

Therefore, regardless of the length of the text, I aim to keep it within two lines in terms of width. Is there a way to achieve this using CSS, or would jQuery be a better option?

jquery css

Answer 1

Answer №1

Custom JavaScript Demo

CSS:

.double-lines {
    background-color: yellow;
    display: inline-block;
    white-space: nowrap;
}
.double-lines.wrapped {
    white-space: normal;
}

JS:

$(".double-lines").each(function () {
    var $width = $(this).width();
    $(this).width($width / 2)
           .addClass("wrapped");
});

Edit: This is a more precise method

Upgraded JavaScript Demo

$(".double-lines").each(function () {
    var $lines = $(this).height() / parseInt($(this).css("lineHeight"));

    while (($lines > 2) || ($(this)[0].scrollWidth > $(this).width())) {
        $(this).width("+=1");
        $lines = $(this).height() / parseInt($(this).css("lineHeight"));
    }
});

Answer 2

Custom JavaScript Demo

CSS:

.double-lines {
    background-color: yellow;
    display: inline-block;
    white-space: nowrap;
}
.double-lines.wrapped {
    white-space: normal;
}

JS:

$(".double-lines").each(function () {
    var $width = $(this).width();
    $(this).width($width / 2)
           .addClass("wrapped");
});

Edit: This is a more precise method

Upgraded JavaScript Demo

$(".double-lines").each(function () {
    var $lines = $(this).height() / parseInt($(this).css("lineHeight"));

    while (($lines > 2) || ($(this)[0].scrollWidth > $(this).width())) {
        $(this).width("+=1");
        $lines = $(this).height() / parseInt($(this).css("lineHeight"));
    }
});

Answer 3

Answer №2

Instead of using a single tag, you can achieve the desired result by making some modifications to the source code:

<div>
    <p>long text goes here long text goes here long text goes #</p>
    <p>long text goes here long text goes here long text goes</p>
</div>

<style>
    div > p {
        white-space:nowrap;
    }
</style>

This approach will ensure that both lines remain on one line without setting a specific width for your div element.

Answer 4

Instead of using a single tag, you can achieve the desired result by making some modifications to the source code:

<div>
    <p>long text goes here long text goes here long text goes #</p>
    <p>long text goes here long text goes here long text goes</p>
</div>

<style>
    div > p {
        white-space:nowrap;
    }
</style>

This approach will ensure that both lines remain on one line without setting a specific width for your div element.

width restriction to only accommodate on two lines

Answer №1

Answer №2

Similar questions

Order of callback execution in jQuery's ready function

Bootstrap icon issue: square displaying instead of the intended icon

Updating the jQuery $ function to accommodate outdated codebases

Are there any alternatives to PHP for implementing an auto-complete search feature?

Is a pop-up alert necessary for table modifications?

The malfunction of CSS3 effect

Why does jQuery function properly in jsfiddle, but not in an HTML file?

What is the best way to iterate through multiple iframes?

Tips for selectively executing a script based on whether the DIV is within the viewport

The issue with the material design checkbox change functionality not functioning as expected

Is there a way to position the logo icons on the right side of the footer?

Searching for hidden elements within a div using a filter option

The height of the navigation bar adjusts to fit the image

Using CSS to create a triangular background within a <div> element

Creating an HTML structure that limits each li to only contain three div elements can be achieved using React and Underscore.js

A problem arises when trying to showcase the content in a responsive manner on the hamburger menu, particularly when viewing on mobile

Modify the animation on Material UI Autocomplete with an underline effect

I am looking to obtain a value through a JavaScript function that sums values upon clicking. The result is satisfactory, but I am seeking a way to limit the value

Executing a 'WebMethod' using jQuery in ASP.NET WebForms

Unable to store data in database using Ajax PHP MySQL