CODEWITHSUNDEEP
htmlcsstextoverflow
Cakers
Cakers

Reputation: 655

Text overflow in container

I am trying to figure out how to make the text and my arrow not overflow into the next cell. I have tried giving it a min-width and that didn't seem to work. I know I may have to use media queries when it gets that small but if anyone has an idea as to what I have to do when it is that small so that it doesn't overflow, that would help so much.

Here's a photo of the issue:

enter image description here

I created a JS Fiddle of the issue: https://jsfiddle.net/e9uv08wh/6/

    
    a{
      
      
          color: #544f47;
    height: 3.4em;
    font-weight: normal;
    padding-left: 1em;
    border-bottom: .0625em solid #544f47;
    line-height: 3.4em;
    display: block;
  

         
}

i.fa.fa-chevron-right {
  float: right;
         margin-right: .5em;
         padding-top: .3em;
          line-height:3em;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


</div>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>
<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> 
<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

Thank you.

Desired result when small:

enter image description here

Upvotes: 2

Views: 130

Answers (3)

Aonghas M
Aonghas M

Reputation: 2101

There are a number of ways to achieve what you are trying to do. Applying overflow: hidden to your divs would prevent the overflow but its not an optimal solution.

I would rebuild your HTML & CSS like so:

<div class="border"><a class="newnav" href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i></div>
<div class="border"><a href="https://www.google.com/">Google Google Google</a><i class="fa fa-chevron-right"></i></div>
<div class="border"><a href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i></div>
<div class="border"><a href="https://www.google.com/">Submit to Google</a><i class="fa fa-chevron-right"></i> </div>
<div class="border"><a href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i> </div>
<div class="border"><a class="newnav" href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i> </div>

.border {
  height: 55px;
  border-bottom: .0625em solid #544f47;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 a { 
    color: #544f47;
    font-weight: normal;
    padding-left: 1em;
    display: block;
}

i.fa.fa-chevron-right {
  display: block;
  margin-right: .5em;
  padding-top: .3em;
  line-height:3em;
}

You can see how this behaves in this jsfiddle: https://jsfiddle.net/95cgh68n/1/

Using the divs as flexboxes allows you to setup how you would like the child elements to be arrayed. This solution should at least cut down on the number of media queries you need to use.

Here is a great guide to flex box if you arent familiar with it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 4

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

If you dont want to change the css, you can apply the overflow: hidden to you <a> tags

CAUTION: i added body width to 40vh to reproduce a smalle screen.

Hope this helps :)

a {
  color: #544f47;
  height: 3.4em;
  font-weight: normal;
  padding-left: 1em;
  border-bottom: .0625em solid #544f47;
  line-height: 3.4em;
  display: block;
  overflow: hidden;
}

i.fa.fa-chevron-right {
  float: right;
  margin-right: .5em;
  padding-top: .3em;
  line-height: 3em;
}

body {
  width: 40vh;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


</div>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>
<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

Upvotes: 1

cssyphus
cssyphus

Reputation: 40096

To stop the overflow, you can use css div.border{overflow:hidden}, but you might wish to refactor your html to have only the text hidden and to always show the arrow.

Also, you are using <span> tags to delineate your rows. You should use DIVs for this - because spans are by design inline tags, and you appear to want to break the rows, which is what DIVs do. Change the spans to divs.

Upvotes: 2

Related Questions