Enclosing hyperlinks within a container with a set width limit

Question

Enclosing hyperlinks within a container with a set width limit

I've set up a fixed width div with several links inside, each with text containing non-breaking spaces between the words.

My goal is to ensure that when a link reaches the edge of the div, the entire link moves down to the next line.

While testing in JSFiddle, I initially had a single unformatted piece of html and noticed the final link did not move to a new line as desired.

Upon reformatting the code with tags on separate lines, the final tag now appropriately moves to a new line when it hits the width limit of the div.

The HTML is being dynamically generated from a script, producing a concatenated string for rendering. Here is the HTML used along with a working fiddle demonstrating both approaches:

http://jsfiddle.net/8gdez8ur/2/

<div style="width: 350px; overflow: hidden;"><a href="#" action="zoom" style="font-size:11px;padding-right:2px;">Zoom</a><a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street'nbsp;View</a><a action="addplacemarker" href="#" style="font-size:11px;padding-right:2px;">Add'nbsp;Placemarker</a><a action="route" href="#" style="font-size:11px;padding-right:2px;">ETA'nbsp;To</a><a action="reportproblem" href="#" style="font-size:11px;padding-right:2px;">Incorrect'nbsp;Location'nbsp;Details</a><a action="sendmessage" href="#" style="font-size:11px;">Send'nbsp;Message</a></div>
<hr>
<div style="width: 350px; overflow: hidden;">
<a href="#" action="zoom" style="font-size:11px; padding-right:2px;">Zoom</a>
<a action="streetview" href="#" style="font-size:11px; padding-right:2px;">Street'nbsp;View</a>
<a action="addplacemarker" href="#" style="font-size:11px; padding-right:2px;">Add'nbsp;Placemarker</a>
<a action="route" href="#" style="font-size:11px; padding-right:2px;">ETA'nbsp;To</a>
<a action="reportproblem" href="#" style="font-size:11px; padding-right:2px;">Incorrect'nbsp;Location'nbsp;Details</a>
<a action="sendmessage" href="#" style="font-size:11px; padding-right:2px;">Send'nbsp;Message</a>
</div>

What could be causing this discrepancy in behavior? Any insights are appreciated!

html css

Answer 1

Answer №1

The issue appears to be stemming from the absence of sufficient white space between your inline elements. This is causing them to display as one continuous string. To address this, consider changing your anchor tags to display as inline-block elements.

a{
    display: inline-block;
}

Check out the updated fiddle here

Answer 2

The issue appears to be stemming from the absence of sufficient white space between your inline elements. This is causing them to display as one continuous string. To address this, consider changing your anchor tags to display as inline-block elements.

a{
    display: inline-block;
}

Check out the updated fiddle here

Answer 3

Answer №2

It appears to be connected to a discussion on creating new lines between anchors in HTML source code, causing empty space in the browser.

To address this issue and achieve the desired outcome, I suggest adding whitespace after each anchor, such as by inserting   where applicable.

Answer 4

It appears to be connected to a discussion on creating new lines between anchors in HTML source code, causing empty space in the browser.

To address this issue and achieve the desired outcome, I suggest adding whitespace after each anchor, such as by inserting   where applicable.

Answer 5

Answer №3

When you include line breaks in your code (like in the second example), it will result in generating whitespace that will display the content as desired. In contrast, the first example without line breaks would all be on one line, creating a leading space issue with your hyperlink.

To fix this problem, simply add

div a { display: inline-block; }

to your first example code to achieve the desired effect.

Answer 6

When you include line breaks in your code (like in the second example), it will result in generating whitespace that will display the content as desired. In contrast, the first example without line breaks would all be on one line, creating a leading space issue with your hyperlink.

To fix this problem, simply add

div a { display: inline-block; }

to your first example code to achieve the desired effect.

Answer 7

Answer №4

While utilizing `inline-block` can solve the issue, the root of the problem in your original post lies within this code snippet:

<a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street&nbsp;View</a>

If you observe closely, there is a single space between ">" and "Street," which causes the line break after the first `a` element.

By removing the space, the line remains on a single line but gets clipped due to `overflow: hidden` styling.

div {
    width: 350px;
    overflow: hidden;
    border: 1px dotted blue;   
}
div a {
    font-size: 11px;
    padding-right: 2px;
}

<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" > Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div>
<hr>
<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" >Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div>
<hr>
<div>
<a href="#" action="zoom" >Zoom</a>
<a action="streetview" href="#" >Street&nbsp;View</a>
<a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a>
<a action="route" href="#" >ETA&nbsp;To</a>
<a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a>
<a action="sendmessage" href="#" >Send&nbsp;Message</a>
</div>

Answer 8

While utilizing `inline-block` can solve the issue, the root of the problem in your original post lies within this code snippet:

<a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street&nbsp;View</a>

If you observe closely, there is a single space between ">" and "Street," which causes the line break after the first `a` element.

By removing the space, the line remains on a single line but gets clipped due to `overflow: hidden` styling.

div {
    width: 350px;
    overflow: hidden;
    border: 1px dotted blue;   
}
div a {
    font-size: 11px;
    padding-right: 2px;
}

<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" > Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div>
<hr>
<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" >Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div>
<hr>
<div>
<a href="#" action="zoom" >Zoom</a>
<a action="streetview" href="#" >Street&nbsp;View</a>
<a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a>
<a action="route" href="#" >ETA&nbsp;To</a>
<a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a>
<a action="sendmessage" href="#" >Send&nbsp;Message</a>
</div>

Enclosing hyperlinks within a container with a set width limit

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for smoothly transitioning elements to a visible state with a Fadein effect

Adding vertical separation between Bootstrap Cards

How can I retrieve XML through a URL using HTML5 and JavaScript?

Employing plain Javascript (without the use of jQuery) to concatenate information from two JSON strings - encountering an error due to the absence of

Utilizing PHP variables within HTML code that is stored within another PHP variable

The div element is finally loading properly after multiple clicks

What is the process for downloading a blob using an input field?

The vertical size of the "input" element is larger in Firefox Android when using "white-space:pre-wrap" compared to Chrome on Android

Using AJAX for initiating Liquid code upon page load

The <a> tag styled as a button with the btn-primary class is malfunctioning specifically on MacOS Safari

PHP For Loop Generating HTML Table

Incorporate a CSS file into your Kohana template

Is it possible to modify an HTML document on the server side using Node.js?

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

Deleting Data with HTML Using the HTTP DELETE Method

Ways to declare a function within the events onMouseOver and onMouseOut

Removing Firefox's button outline when the mouse is pressed, not clicked, hovered over, or focused

Showing the Datepicker upon clicking the button

Generating interactive HTML content using a JSON file with AngularJS

Issues with overlapping floating labels in Bootstrap 5