Question

对于我正在制作的网站，我需要在导航菜单中添加某种描述。我们的想法是，当您将鼠标悬停在导航项上时，会在其下方显示说明。这部分我已经工作了。但...

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

我希望描述文字不要像初始菜单那样宽。在this fiddle中，您可以清楚地看到它变宽了。如何限制该文本的广泛范围？

Answer 1

我更新了fiddle

想法是为您的li分配特定宽度，为NavSubhead分配100％

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

Answer 2

除了指定特定的宽度，我知道只有一种CSS方法。

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

＆＃13;

//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();
});

＆＃13;

#nav {
  float: left;
}
li {
  border: 1px solid green;
}
li div {
  display: table-caption;
  caption-side: bottom;
}

＆＃13;

<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>

＆＃13;

Answer 3

我假设您要限制菜单悬停时出现的文本，您可以通过限制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)+'...';
});

更新了部分：

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

它限制字符直到5.您可以根据需要增加/减少。

CSS使p标签不拉伸div宽度

3 个答案: