CODEWITHSUNDEEP
htmlcss
Manniss
Manniss

Reputation: 11

CSS make p tag not stretch div width

For a website I'm making I need to put some kind of description in a navigation menu. The idea is that when you mouse-over the nav item, a description appears underneath it. This part I have already working. but...

 <li>
  <a href="">navigation 1</a>
  <div class="NavSubhead">
    <p>navigation 1 comment</p>
  </div>
</li>

I want te description text not to be wider as the initial menu. In this fiddle, you can see clearly that it comes wider. How do I limit the wide of that text?

Upvotes: 1

Views: 1221

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

Other than assigning specific widths I know of only one CSS method for this.

li div {
  display: table-caption;
  caption-side: bottom;
}


//first method
$(".NavSubhead").hide();

$('#nav li').hover(
  function() {
    $(this).children(".NavSubhead").stop(false, true).slideDown().fadeIn(500);
  },
  function() {
    $(this).children(".NavSubhead").stop(false, true).slideUp().fadeOut(500);
  }
).click(function(e) {
  e.preventDefault();
});
#nav {
  float: left;
}
li {
  border: 1px solid green;
}
li div {
  display: table-caption;
  caption-side: bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li>
      <a href="">navigation 1</a>
      <div class="NavSubhead">
        <p>navigation 1 comment</p>
      </div>
    </li>
    <li>
      <a href="">navigation 2</a>
      <div class="NavSubhead">
        <p>navigation 2 comment</p>
      </div>
    </li>
    <li>
      <a href="">navigation 3</a>
      <div class="NavSubhead">
        <p>navigation 3 comment</p>
      </div>
    </li>
  </ul>
</div>

Upvotes: 1

Helping Hands
Helping Hands

Reputation: 5396

I assume that you want to limit that text which comes on menu hover , You can limit those text by putting limit from jQuery :

    //first method
$(".NavSubhead").hide();

$('#nav li').hover(
  function(){
    $(this).children(".NavSubhead").stop(false, true).slideDown().fadeIn(500);
    },
    function(){
        $(this).children(".NavSubhead").stop(false, true).slideUp().fadeOut(500);
    }
).click(function(e) { e.preventDefault(); });

$("p").text(function(index, currentText) {
    return currentText.substr(0, 5)+'...';
});

Updated Section :

$("p").text(function(index, currentText) {
        return currentText.substr(0, 5)+'...';
    });

It is limiting characters till 5. You can Increase/Decrease as per your need.

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

I have updated the fiddle

Idea is to assign a specific width to your li and 100% to NavSubhead

#nav {
  float: left;
}
li
{
  width: 100px;
}
.NavSubhead
{
  width:100%;
}

Upvotes: 1

Related Questions