Enclose a text line within a flexible div container

Question

Enclose a text line within a flexible div container

I've encountered an issue with my CSS: I have a dynamic div containing a single line of text that needs to wrap every time the width of the div resizes to a smaller size.

The challenge lies in having the text inside a table, serving as a directory for contacts and similar to paging functionality.

For a clearer view of the problem, refer to the attached images. Additionally, a snippet of the code has been provided below for reference.

Since I lack expertise in CSS, I'm seeking suggestions for a more suitable layout for this particular scenario.

Your assistance would be greatly appreciated. Thank you! :)

<div id="divSearch" style="width:350px">
<p style="word-wrap:break-word;white-space:pre-wrap;">
    <table id="tblGlossary">
        <tr>
            // Table content here
        </tr>
    </table>
</p>
</div>

html css

Answer 1

Answer №1

I made some updates by removing the <table> and using a <div> tag instead:

Check out the live demo here

Here's the updated HTML code:

<div id="divSearch" style="width:350px">
<p style="word-wrap:break-word;white-space:pre-wrap;">
    <div id="tblGlossary">
            <a href="#">#</a>
            <a href="www.abc.com?tag=A'">A</a>
            <a href="www.abc.com?tag=B'">B</a>
            <a href="www.abc.com?tag=C'">C</a>
            <a href="www.abc.com?tag=D'">D</a>
            <a href="www.abc.com?tag=E'">E</a>
            <a href="www.abc.com?tag=F'">F</a>
            <a href="www.abc.com?tag=G'">G</a>
            <a href="www.abc.com?tag=H'">H</a>
            <a href="www.abc.com?tag=I'">I</a>
            <a href="www.abc.com?tag=J'">J</a>
            <a href="www.abc.com?tag=K'">K</a>
            <a href="www.abc.com?tag=L'">L</a>
            <a href="www.abc.com?tag=M'">M</a>
            <a href="www.abc.com?tag=N'">N</a>
            <a href="www.abc.com?tag=O'">O</a>
            <a href="www.abc.com?tag=P'">P</a>
            <a href="www.abc.com?tag=Q'">Q</a>
            <a href="www.abc.com?tag=R'">R</a>
            <a href="www.abc.com?tag=S'">S</a>
            <a href="www.abc.com?tag=T'">T</a>
            <a href="www.abc.com?tag=U'">U</a>
            <a href="www.abc.com?tag=V'">V</a>
            <a href="www.abc.com?tag=W'">W</a>
            <a href="www.abc.com?tag=X'">X</a>
            <a href="www.abc.com?tag=Y'">Y</a>
            <a href="www.abc.com?tag=Z'">Z</a>
    </div>
</p>
</div>

And here's the corresponding CSS:

#tblGlossary a {
    padding: 0 2px
}

Answer 2

I made some updates by removing the <table> and using a <div> tag instead:

Check out the live demo here

Here's the updated HTML code:

<div id="divSearch" style="width:350px">
<p style="word-wrap:break-word;white-space:pre-wrap;">
    <div id="tblGlossary">
            <a href="#">#</a>
            <a href="www.abc.com?tag=A'">A</a>
            <a href="www.abc.com?tag=B'">B</a>
            <a href="www.abc.com?tag=C'">C</a>
            <a href="www.abc.com?tag=D'">D</a>
            <a href="www.abc.com?tag=E'">E</a>
            <a href="www.abc.com?tag=F'">F</a>
            <a href="www.abc.com?tag=G'">G</a>
            <a href="www.abc.com?tag=H'">H</a>
            <a href="www.abc.com?tag=I'">I</a>
            <a href="www.abc.com?tag=J'">J</a>
            <a href="www.abc.com?tag=K'">K</a>
            <a href="www.abc.com?tag=L'">L</a>
            <a href="www.abc.com?tag=M'">M</a>
            <a href="www.abc.com?tag=N'">N</a>
            <a href="www.abc.com?tag=O'">O</a>
            <a href="www.abc.com?tag=P'">P</a>
            <a href="www.abc.com?tag=Q'">Q</a>
            <a href="www.abc.com?tag=R'">R</a>
            <a href="www.abc.com?tag=S'">S</a>
            <a href="www.abc.com?tag=T'">T</a>
            <a href="www.abc.com?tag=U'">U</a>
            <a href="www.abc.com?tag=V'">V</a>
            <a href="www.abc.com?tag=W'">W</a>
            <a href="www.abc.com?tag=X'">X</a>
            <a href="www.abc.com?tag=Y'">Y</a>
            <a href="www.abc.com?tag=Z'">Z</a>
    </div>
</p>
</div>

And here's the corresponding CSS:

#tblGlossary a {
    padding: 0 2px
}

Answer 3

Answer №2

Swap out your complete table for a div without a set width:

<div id="divGlossary">
    <a href="#" >#</a>
    &nbsp;
    <a href="www.abc.com?tag=A'">A</a>
    &nbsp;
    <a href="www.abc.com?tag=B'">B</a>
    &nbsp;
    <a href="www.abc.com?tag=C'">C</a>
    &nbsp;
...

If you already have the table within a div, just utilize that existing one.

The word-wrap feature doesn't function on table cells in the manner you desire.

Answer 4

Swap out your complete table for a div without a set width:

<div id="divGlossary">
    <a href="#" >#</a>
    &nbsp;
    <a href="www.abc.com?tag=A'">A</a>
    &nbsp;
    <a href="www.abc.com?tag=B'">B</a>
    &nbsp;
    <a href="www.abc.com?tag=C'">C</a>
    &nbsp;
...

If you already have the table within a div, just utilize that existing one.

The word-wrap feature doesn't function on table cells in the manner you desire.

Answer 5

Answer №3

Attempting to wrap a table can be tricky. Have you thought about using the CSS property display: inline on all elements as a possible solution?

Answer 6

Attempting to wrap a table can be tricky. Have you thought about using the CSS property display: inline on all elements as a possible solution?

Answer 7

Answer №4

If you're okay with incorporating a scrollbar, you can implement the following style:

#longlines {
clip : auto;
overflow : scroll;
}

Hopefully, this will resolve your issue. Please inform me if it does not.

<div width="10%" style="position: absolute; left: 2%; word-wrap:break-word;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;word-wrap:break-word;"> bbbb </div>

Alternatively,

Wrap your text within <span> </span>

Answer 8

If you're okay with incorporating a scrollbar, you can implement the following style:

#longlines {
clip : auto;
overflow : scroll;
}

Hopefully, this will resolve your issue. Please inform me if it does not.

<div width="10%" style="position: absolute; left: 2%; word-wrap:break-word;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;word-wrap:break-word;"> bbbb </div>

Alternatively,

Wrap your text within <span> </span>

Enclose a text line within a flexible div container

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Increasing the height of child elements beyond the boundaries of their parent container

Retrieve data from a different div, perform a subtraction operation, and dynamically update yet another div using jQuery

Tips for effectively applying an image as a border

Link clicking does not trigger URL routing properly

Exploring the elimination of box shadow on elements that overlap

What is the best way to toggle the visibility of a div when a button is clicked?

Issue with alignment on the printed version of an HTML document

Position the background of the container in the center and keep it

Is there a way to include multiple div elements on a single page using React?

Open Chrome in fullscreen mode directly from your Android home screen without the statusbar displayed

Wrapping is disabled for all elements within the container div that contains three additional div elements

Clickable tab to collapse a section containing an image and aligned text

CSS dropdown menu - overlapping elements an issue?

Run a JavaScript code to show a hidden element

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

switch out asterisk on innerhtml using javascript

Optimize Your Website for Various Screen Sizes

Is it possible for me to send JSON data using a form to HTTP_RAW_POST_DATA?

Tips for implementing an HTML modal with AngularJS binding for a pop up effect

CSS: The button appears to be slightly lower than the label