CODEWITHSUNDEEP
htmlcss
Alexander
Alexander

Reputation: 151

Re-aligning multiple words in a text box

I have a line of links in my footer, some of which have multiple words. When the width of the page is decreased, the words on the far right hit the edge of my text box and they re-align themselves on the left side in a second line. My problem is that with the links that have multiple words, there will be times when those links are split up (for example, "About" would be on the right side of the footer and "Us" would be on the left side in line 2). I'm looking for a way to always keep those words together when the page width is decreased.

This is my html

  <div class="custom-footer-menu" style="font-size: 15px; width: 100%;">
    <a href="https://example.com" class="custom-footer-menu-film custom-footer-links">Film</a>
    <a href="https://example.com" class="custom-footer-menu-photography custom-footer-links">Photo</a>
    <a href="https://example.com" class="custom-footer-menu-articles custom-footer-links">Articles</a>
    <a href="https://example.com" class="custom-footer-menu-services custom-footer-links">Services</a>
    <a href="https://example.com" class="custom-footer-menu-about custom-footer-links">About</a>
    <a href="https://example.com" class="custom-footer-menu-contact custom-footer-links">Contact</a>
    <a target="_blank" rel="noopener" href="https://example.com" class="custom-footer-menu-seventh-direction-films custom-footer-links">Seventh Direction Films</a>
    <a href="https://example.com" class="custom-footer-menu-pages custom-footer-links">Pages</a>
    <a href="https://example.com" class="custom-footer-menu-privacy-policy custom-footer-links">Privacy Policy</a>
  </div>

This is my CSS

.custom-footer-menu {
    padding-top: 45px !important;
    padding-right: 300px !important;
    margin-left: 95px !important;
}
.custom-footer-links {
    margin-left: 15px;
}
.custom-footer-menu-film {
    padding-left: 0px !important;
}

This is what the problem looks like (see Privacy Policy) How it is now

This is how I want it to look like all the time (I slightly decreased the width of the page to get this image) How I want to be all the time

Upvotes: 1

Views: 198

Answers (2)

Johannes
Johannes

Reputation: 67738

Apply display: inline-block; to your links to make them unbreakable units, and to avoid the indent in the first line, add margin-left: 0 to the first link (using .custom-footer-links:first-child: as a selector):

.custom-footer-menu {
    padding-top: 45px !important;
    padding-right: 300px !important;
    margin-left: 95px !important;
}
.custom-footer-links {
    margin-left: 15px;
    display: inline-block;
}
.custom-footer-links:first-child:
   margin-left: 0;
}
.custom-footer-menu-film {
    padding-left: 0px !important;
}
<div class="custom-footer-menu" style="font-size: 15px;" >
    <a href="https://example.com" class="custom-footer-menu-film custom-footer-links">Film</a>
    <a href="https://example.com" class="custom-footer-menu-photography custom-footer-links">Photo</a>
    <a href="https://example.com" class="custom-footer-menu-articles custom-footer-links">Articles</a>
    <a href="https://example.com" class="custom-footer-menu-services custom-footer-links">Services</a>
    <a href="https://example.com" class="custom-footer-menu-about custom-footer-links">About</a>
    <a href="https://example.com" class="custom-footer-menu-contact custom-footer-links">Contact</a>
    <a target="_blank" rel="noopener" href="https://example.com" class="custom-footer-menu-seventh-direction-films custom-footer-links">Seventh Direction Films</a>
    <a href="https://example.com" class="custom-footer-menu-pages custom-footer-links">Pages</a>
    <a href="https://example.com" class="custom-footer-menu-privacy-policy custom-footer-links">Privacy Policy</a>
  </div>

Note: I removed width: 100%; from .custom-footer-menu since otherwise it will always be wider as its parent or the full window, since the margins and paddings are * added* to the 100% width.

Upvotes: 1

MOHAMED KHALIL YADAOUI
MOHAMED KHALIL YADAOUI

Reputation: 34

use the &nbsp; Character Entities between the word that should not have a braking space. or use the flex display in the parent element of the links.

Upvotes: 1

Related Questions