Issue with max-width property not functioning properly on an anchor tag enclosed within a field

I'm currently working on a webpage where the content always needs to fit within the visible width. Everything was going smoothly until I added a fieldset.

Strangely, the anchor text refuses to break when it's inside a fieldset. Could someone please explain:
- why is this happening?
- how can I work around this issue?

For example:

<fieldset>
  <a href="example.com">verylonglinktextthatmakesproblemsinsmallwindows</a>
</fieldset>
<a href="example.com">verylonglinktextthatbreaksmagicallyoutsidethefieldset</a>

Check out the fiddle here: https://jsfiddle.net/myngsges/2/

csswidthanchorfieldset

Answer №1

Simply including 'min-width: auto;' appears to solve the issue. Check out this reference for more information: Word-wrap doesn't work on div within fieldset in Chrome

Answer №2

Maybe consider inserting a space between certain words.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Caution: React is unable to identify the `PaperComponent` prop on a DOM element

Trying to create a draggable modal using Material UI's 'Modal' component. I want users to be able to move the modal around by dragging it, so I decided to use 'Draggable' from react-draggable library. However, I encountered this er ...

javascriptcssreactjsmaterial-uimodal-dialog

Include a nested input field and corresponding label within a div element

Using JavaScript, I am attempting to dynamically add a div containing an input and label within another div in the body. The color variable inside the JavaScript code will eventually be relocated within the file, but for clarity, it is included here. Essen ...

javascripthtmlcssappendchild

Div text with superfluous line breaks

Whenever a user clicks the sign-up button ("Cadastrar" in Portuguese) on my website, the newsletter form successfully hides. However, there seems to be unnecessary line breaks in the success message. Why is this happening? I am trying to make sure that th ...

htmlcss

What impact will splitting a single file into multiple files have on the overall performance of the website?

Imagine having an index.php file that includes multiple other files: Contents of index.php --------------------------- include('header.php'); include('footer.php'); --------------------------- Contents of header.php ------------------ ...

phphtmlcssperformanceinclude

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

Error encountered while attempting to save my document as a PDF due to a CSS issue

I recently created an HTML page to display data from a MySQL database, and I'm pleased to say that everything is functioning correctly. body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #F0F0F0; font: ...

htmlcsspdf

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

javascriptcssmedia-queries

Failure to Include jQuery in Header.php File

After adding the jQuery library to header.php, I encountered an issue where index.php was unable to access the library. Surprisingly, when the library was referenced directly from index.php, access to the jQuery library worked without any problems. Here i ...

javascriptphpjqueryhtmlcss

Ensuring the CSS animation reaches its ultimate state by the end

I am currently implementing an animation on specific elements that have their opacity set to 0 in the CSS. The animation is triggered onClick, and via keyframes, it transitions the opacity from 0 to 1, among other things. However, once the animation compl ...

csscss-animations

The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place? In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but ...

javascriptcsstwitter-bootstrapbootstrap-4footer

javax.el.MethodNotFoundException: JSP method cannot be located

While compiling the JSP template, I encountered the following exception: The method getFriendImage() is not recognized I attempted to rebuild the class without success. The src attribute contains a valid link to an image that is functioning properly. ...

javahtmlcssjsp

Center the div element and adjust its scale to perfectly fit the screen

I have been struggling to optimize my website for mobile devices by centralizing the content display. When I access it on a mobile device through , there is excessive space below the content, forcing me to pinch zoom in order to read properly. How can I el ...

csshtmlmobilecentralized

What is the best way to arrange these badges in a row?

I'm struggling to horizontally align these badges next to each other, as inline-block isn't working and they keep stacking vertically instead of side by side. How can I achieve the alignment shown in the image below? This is the desired appeara ...

htmlcsstwitter-bootstrapbootstrap-5

Placing text alongside an image at the top of the page

Here's the HTML code generated by JSF: <div align="center"> <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/> <span style=""> Welcome abc, <input type= ...

htmlcsstext-alignment

The alignment of my divs is all out of whack -

Currently, I have styled my website to work perfectly in Firefox, but it's not appearing correctly in Chrome. You can see the layout at . My goal is to maintain the layout as seen in Firefox while also making sure it displays properly in Chrome and IE ...

csshtml

Exploring the power of positive lookahead in CSS styling

When working with Perl regex, I understand how positive lookahead works - such as q(?=u) matching a q that is followed by a u without including the u in the match. Now, I am interested in finding something similar in CSS: specifically, I am looking to sele ...

cssregex

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

htmlcsscss-selectorsbackground-image

Problem with Jquery hover or mouse enter show/hide functionality

I am currently experimenting with displaying hidden text when the mouse enters a div and hiding it when it leaves. Here is the progress I've made on my JSFiddle: $(document).ready(function() { $(".image").mouseover(function(){ $(".hover").show ...

javascriptjqueryhtmlcss

Highlighting table rows when hovering in IE with JQuery - compatibility across all versions

I have a table on my jsp page with multiple rows and columns. I want to ensure that visitors can easily follow along when they interact with the table - by highlighting the row or column they hover over with a different background color. Although the **hov ...

javascriptjqueryhtmlcssinternet-explorer

Transforming a pseudo element from horizontal to vertical orientation

I have a unique snippet of code that generates an element at the bottom of a div to serve as an inventive 'arrow/pointer' pointing down. Now, I am seeking assistance in tweaking the script so that the 'arrow/pointer' directs towards th ...

javascriptjqueryhtmlcsspseudo-element