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

Unveil concealed information within a freshly enlarged container

Adjustable Size with jQuery UI - Resizing Multiple Divs Causes Movement of Adjacent Divs

Is there a way to capture the click event of a dynamically generated row within a panel?

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Is it possible to make a div resize to fit its container?

How to make a Kendo Grid Combobox template or editor automatically set focus and select all text

Positioning a designated div directly above a designated spot on the canvas

NodeJS async/await not pausing for the completion of the previous request's response

Creating impenetrable div elements with JavaScript or jQuery

Is the background image viewport centered?

The jQuery function for AJAX does not properly validate the boolean value provided by the controller

jQuery doesn't seem to function properly upon initial click

Text in a class button that is not skewed

What could be causing my tabs to shift to the vertical side when using large, larger, and wide screens?

Transferring information between pages through ajax communication

What is the reason behind this occurrence with just one 's'?

AngularJS Material Design sticky header MD table container

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

Using the $.ajax or $.get function can only retrieve data from local files

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?