Tips for preserving hyperlinks while elegantly containing them within a designated space

Today, while experimenting with new angular features, I encountered an issue that is shown in the link below:

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

The "tags" on the page are expanding beyond the boundaries of their parent container (the white div). They wrap, but not very neatly, as you can see.

I would like them to avoid breaking in the middle of a word. For example, the phrase "software engineering" should be fully displayed on the second line.

The tags are enclosed within a div structured like this:

<div class="menu-block">
  <div class="menu-header">
    <strong>&raquo; Tags</strong>
  </div>
  <div class="menu-content tags">
    <tags></tags>
  </div>
</div>

Here are the corresponding CSS classes used:

.menu-block {
    border-bottom: 1px solid #eeeeee;
    padding: 1.2em;
    border-left: 1px solid #eeeeee;
    background-color: #fcfcfc;
}

.menu-block .menu-header {
    margin-bottom: 1em;
    font-size: 14pt;
}

.menu-block .menu-content {
    font-size: 11pt;
    /* Review specifications below */
}

.menu-block .tags {
    font-size: 11pt;
    line-height: 2.2em;
}

The .menu-block element is contained within a bootstrap .col-4 column.

Lastly, regarding the angular component (annotated for clarity):

@Component({
    selector: 'tags',
    template: `
    <a *ngFor="let tagFeed of tagFeeds" class="tag" href="/tag/{{tagFeed.id}}">{{tagFeed.id}}</a>
    `,
})
htmlcssangular

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

Utilizing vanilla JavaScript or ES6 to extract data from a JSON file

I am currently working on an HTML project where I need to extract data from a JSON file that cannot be modified. I am looking to accomplish this using pure JavaScript or ES6, but I am struggling to make it work. Specifically, I am trying to retrieve a link ...

javascripthtmljsonecmascript-6

Enhance Your Cards with Hover Zoom Text

I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...

htmlcssbootstrap-5

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

Ways to access the value of the parent observable?

I've been exploring the concept of nesting HTTP requests using mergeMap. The API I'm working with sends data in parts, or pages, which means I have to make more requests based on the total number of pages. To determine the number of pages, I alw ...

angularrxjs

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

I am facing a problem where the entire array is being passed as an argument when I call onchange after getting correct values in the dropdown. Instead of only receiving the selected value, e contains the whole array. Here is the code snippet that demonst ...

javascripthtmlreactjsdropdown

The CSS media queries are failing to adjust the properties from 1024 to 768 as expected

Currently, I am working on implementing media queries to customize the color scheme for different screen sizes - particularly in 1024 view and 768 view. However, one issue that I encountered is that the properties defined for the 1024 view are being inheri ...

cssmedia-queries

Increase the spacing between rows and columns in Bootstrap

Is there a way to create gaps between rows and columns in bootstrap without disrupting the layout? I am trying to have three columns on each row by using col-4, but when I try to add margin or padding, it messes up the design. My goal is to achieve a layo ...

cssbootstrap-5

How to target the attribute value of an image element that has a specific parent class using jQuery

I'm working with a list that looks like this: <ul> <li><div class="thumb"><img src="image-1.jpg"></div></li> <li><div class="thumb"><img src="image-2.jpg"></div></li> <l ...

jquerycss

What is the method for positioning the cursor at the beginning of a center-aligned placeholder within a contenteditable element?

Here is the code snippet I am working with: HTML: <div class="title" contenteditable="true" placeholder="Title"></div> CSS: .title { width: 500px; margin: 0 auto; text-align: center; } [contenteditable=true]:empty:before{ conte ...

javascriptjqueryhtmlcssplaceholder

Extracting Date and Time Information from matDatepicker in Angular 6 Material

Below is the code snippet present in my html file: <mat-form-field> <input matInput [matDatepicker]="myDatepicker" placeholder="Choose a date" [(ngModel)]="model.value" name="value"> <mat-datepicker-toggle matSuffix [for]="myDatepic ...

angular

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

Updating HTML label values using jQuery in a loop based on their index position

I am having an issue with my ajax call where I want to loop through each label in a class and set their value to the response returned from the server. However, the current code sets all labels to the same value instead of setting individual values based o ...

javahtmlajaxjquery

Every time I make a change to the code, Laravel's css/app.css file mysteriously vanishes from the mix-manifest.json

Whenever I make a change in my code, the line css/app.css in mix-manifest.json disappears. The only solution is to execute npm run watch or npm run dev, but the problem reoccurs each time I modify the code. Here is how my mix-manifest.json looks when eve ...

csslaravelnpmmodulemanifest

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...

javascriptphpjqueryhtmlcss

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...

cssreactjsstylescomponentsmaterial-ui

Conditional formatting for form field styles

Is there a way in Angular to conditionally render a material style? For instance, I am looking to apply the following style only to my Password form field text, and only when both input boxes have content: .mat-form-field-appearance-outline .mat-form-fiel ...

cssangularangular-material

Creating a stylish diagonal background with CSS has never been easier!

Can CSS be utilized to achieve the design effect depicted in the image below? https://i.sstatic.net/o1k7O.png I am seeking to generate <div> elements with a diagonal split background featuring a solid color on one side and white on the other. ...

csshtml

What programming language is the best choice for Angular 2 development?

As someone who is new to Angular 2, I've discovered that developers have the option to use TypeScript, ES6, and ES5 for their development needs. I understand that TypeScript is considered the superset of ES6 and ES5. Given the stark differences in sy ...

typescriptangularecmascript-6ecmascript-5

Employ the $scope.go() method within a function written in JavaScript

I am working with some HTML code that looks like this <body ng-app="app" ng-controller="IndexCtrl" id="indexBody"> <h1>test</h1> </body> Next, in a JavaScript function, I retrieve the scope like so function myFx() { ...

javascripthtmlangularjscordova

Encountering the error "java.lang.IndexOutOfBoundsException: Index: 1, Size: 1" while attempting to choose the second option in the dropdown menu

I need to choose the third option from a drop-down list that is enclosed in a div element. However, when I try to retrieve the items in the drop-down using Selenium, the size of the drop-down list is only showing as 1 even though there are actually 10 it ...

htmlseleniumselenium-webdriver