Question

我有以下结构：

HTML：

<ul>
  <li>
     <span>asd</span> adsafsadlvjnsd
  </li>
</ul>

CSS：

span {
  width: 0;
}
li:hover span {
  width: 60px;
}

这意味着跨度中的内容最初是隐藏的，但是当项目悬停时显示，目前如果li上的内容太大，它只是简单地推送内容，是否有办法只推送尽可能多的内容必要？我尝试使用word-break，但似乎没有用。

另外，我希望在悬停时拥有幻灯片动画。

Answer 1

您可以在悬停时使用width: auto;代替固定宽度。

span {
  width: 0;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

li:hover span {
  width: auto;
}

<ul>
  <li>
    <span>hello</span> world
  </li>
</ul>

对于连续文字，您可以应用white-space: nowrap;。对于动画，如果跨度不能固定宽度，则可能需要使用一些Javascript，因为当前CSS不允许使用auto宽度/高度进行过渡。下面我使用jQuery来获取跨度的宽度。

<强> jsFiddle

spanWidth = $('li span').width();
$('li span').css('width', '0');

$('li').hover(
  function() {
    $('span', this).css('width', spanWidth);
  },
  function() {
    $('span', this).css('width', '0');
  }
);

/*hide the span, works together with the script*/
span {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  overflow: hidden;
  transition: all .5s;
}
/*get rid of the extra whitespace, use it as needed*/
span { margin-right: -4px; }
li:hover span { margin-right: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent eu tincidunt velit. Nam gravida venenatis mollis. Cras sed lacus varius, pretium nulla eget, auctor diam. Suspendisse ullamcorper ex nisi, non scelerisque lorem pellentesque id. Mauris non bibendum libero, vel efficitur lorem.
  </li>
</ul>

Answer 2

执行此操作的正确方法是使用分词，但默认情况下，span会被视为内联，因此必须将其更改为 display：block 才能使其正常工作。代码应如下：

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

可以从这个旧帖子中获取更多信息：How can I wrap or break long text/word in a fixed width span?

希望这有帮助！

Answer 3

＆＃13;

setAttribute()

＆＃13;

li span{
 display:none;
}

li:hover span{
 display: inline-block;
}

＆＃13;

Answer 4

您的代码必须正常工作，只需将文本向右推，而不是向下，我猜您正在更改其他属性，例如调整范围block将推送其他文本。

使用inline-block检查此代码段：

span {
  display: inline-block;
  vertical-align:middle;
  background:red;
  color:white;
  width: 0;
  overflow: hidden;
  white-space:nowrap;
  transition:width .5s linear;
}
li:hover span {
  width: 120px;
}

<ul>
  <li>
    <span>Hidden Content</span> 
    Donec pulvinar magna quis urna euismod rhoncus. Nunc et mauris quis ex rhoncus semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec non nisl metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eu convallis dui. Vestibulum commodo feugiat mauris, facilisis cursus erat tempor iaculis. Aliquam lorem tortor, placerat at malesuada ac, porta feugiat risus.
  </li>
</ul>

使用动画在悬停时显示隐藏文字

4 个答案: