Automatically transition to the next line if the content exceeds the size of the parent element

I need help creating a component with a horizontal list of links. When the link text is too long, I want the entire word to wrap to the next line instead of getting cut off.

Below is an image showing my current progress on the component. The links are breaking in the middle or overflowing outside of the parent element.

https://i.sstatic.net/fwKXs.png

The "Mind and Soul" link breaks midway, while "Must Go Places" extends beyond the parent container.

SCSS/

.sidebar-widget {
  position: relative;
  z-index: 1;
  background-color: #eff4f9;
  padding: 60px 25px;
  margin-bottom: 40px;

  h3 {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: 400;
    color: $primary-color;

    @media #{$breakpoint-xs} {
      font-size: 24px;
    }
  }

  .sub-category-item {
    border: 2px solid black;
    border-radius: 5px;

    a {
      font-weight: 700;
      color: $secondary-color;
      padding: 2px;
    }
    margin-right: 20px;
  }

}

HTML

<div className="sidebar-widget">
    <h3>Sub Categories</h3>
    <span className="sub-category-item">
        <a href="#"> Random words </a>
     </span
<div>
htmlcsssass

Answer №1

To achieve the desired layout, consider using display:inline-block for the element or enclosing all child elements within a container with 

display:flex; 
flex-wrap:wrap;

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

Is it necessary for block-level elements in HTML to always contain <a> tags within them?

When working with HTML, there is often a debate on whether block-level elements should always enclose <a> tags. What if it's necessary for the <a> tag to wrap around the block-level element in order to ensure that the correct styles are ap ...

csshtmlxhtml

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Searching for and substituting text in HTML

I am using basic HTML without any Javascript, XML, CSS, etc. I am trying to locate instances of "--" and replace them with an 'em dash'. Below is the code I have written: <!DOCTYPE html> <html> <center> <head> <tit ...

html

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

jquerycss

Converting SASS to SCSS with the help of NodeJS is a straightforward process

I am faced with the task of converting numerous SASS files that use tabbed style to SCSS files utilizing curly bracket style within a NodeJS+NPM+Gulp project on a regular basis. It is important to note that I do not want to convert them directly to CSS. T ...

node.jssassconverters

What could be causing my HTML email to appear distorted when viewed in Gmail?

After spending the last 6 hours tackling this issue, I am still stuck. Despite my extensive googling, it seems that divs are supposed to work in emails post-2017. All the online HTML email testers I have used indicate that my email layout is perfectly fine ...

htmlcssemailgmail

Whenever I save innerHTML to a text file, a newline break is automatically inserted in the saved text file. The same newline break also appears when I reload the page

Whenever the button is clicked, the text file saves with a line break for every p tag inside div1, not just the first one. <p>x1</p> ....linebreak If the button is clicked three times, reloaded, and then clicked again, the result is as follows ...

javascripthtmlactivex

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

My primary objective is to develop a RestAPI using Node.js and test it in a small HTML application. With the guidance of my instructor, I successfully created the RestAPI based on an example and customized it to work with my own MySQL database. Testing ea ...

javascripthtmlnode.jsrestexpress

How to modify the link to ensure that a particular tab is already selected when the page loads

How to Add Script for Linking to Rawdata Tab I need help loading specific page content with the Rawdata tab open instead of the Summary tab. What code should I add to the link to ensure that the page loads with "Rawdata"? https://i.stack.imgur.com/avETs. ...

htmlangularjshyperlinkangular-ui-bootstrap

Using various designs on elements generated from ng-repeat

Is it possible to apply different styles to buttons created using ng-repeat by having b.color return a value from the btnValues object? Currently, it is not returning the value. If this is not possible, are there alternative methods to achieve this? < ...

htmlangularjsangularjs-ng-repeat

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

htmlcss

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

javascripthtmlarraysjsonlodash

loading dynamic content into an appended div in HTML using Angular

Here is the HTML code from my app.component.html file: <button mat-raised-button color="primary" mat-button class="nextButton" (click)="calculatePremium()"> Calculate </button> <div id="calcul ...

javascriptcssangulartypescriptdynamic

Implement varying styles in React components

In my React project, I am attempting to create a unique progress bar with custom styling. Specifically, I have a dynamically calculated percentage that I want to assign as the width of a div element. Initially, I tried achieving this using Tailwind CSS: &l ...

javascriptcssreactjstailwind-css

I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this? Is there another way to achieve this ...

htmlcss

Tutorial on integrating jquery ui's '.droppable' feature with the jQuery '.on' method

I have a main div with three inner divs labeled 1, 2, and 3 as shown below: <div id="main"> <div style="height:30px; background-color:yellow;" class="bnr">Banner</div> <div style="height:30px; background-color:yellow;" class=" ...

javascriptjqueryhtmlcssjquery-ui

Experience the sleek and intuitive Material Design Lite navigation drawer, inspired by the likes of Google Android

Currently, I am incorporating Material design lite into my website and have found many templates that work well. However, I am looking to make a slight design modification to the navigation drawer. Here is the dashboard template I am currently utilizing: ...

csshtmlmaterial-designangular2-mdl

Using HTML video to fill entire div container

I'm currently facing an issue with using an HTML video as a fullscreen background replacement for an image. The problem is that the video overflows and covers the entire page instead of staying within the constraints of the header section. Here is th ...

htmlcsshtml5-video

Having trouble accessing NSE Bhavcopy zip file in R due to a HTTP status of '403 Forbidden'

My current project involves automating the process of downloading a zip file in R. On the specific webpage I am working with, I can easily download the zip file by clicking on it or by right-clicking and saving the file. However, my challenge lies in down ...

htmlr

Guide on incorporating the font-awesome library in your project

Forgive me if this sounds like a silly question, but I am completely new to javascript and its libraries. I stumbled upon a similar issue as described in this thread, where the accepted solution included the following line: <link rel="stylesheet" href ...

htmlcssfont-awesome