文本与CSS的宽度转换不起作用 [英] Width transition of text with CSS not working

问题描述

我有一个div，我想显示一个人的名字。

我只想在正常状态下显示此人的名字。当您悬停时，姓氏应显示在名字的右侧，其宽度从0扩展到正常宽度。所有这些文字都对齐到右边。

如果我将过渡应用到姓氏范围内，它甚至不会显示它。

I也试过最大宽度（作为一个人在这里做： http://jsfiddle.net/qP5fW/87/ ）但它不起作用。
所以我做了一个包装div，使用宽度代替max-width，现在它可以工作，只是它根本不显示转换。

I怀疑问题在于auto属性，但如果有人知道如何进行过渡工作，我将非常感激。

这是我的小提琴： https://jsfiddle.net/drywrsy6/

HTML：

 < div class =name> 
< span class =first> John< / span> 
< div class =last-wrapper> 
< span class =last> Doe< / span> 
< / div> 
< / div> 
  

CSS：

  .name {
 border：1px solid lightgrey; 
 margin：10px auto 0px auto; 
 padding：5px; 
 width：300px; 
 font-size：2em; 
 text-align：right; 
 overflow：hidden; 
 white-space：nowrap; 
} 
 
 .first {
 font-style：italic; 
} 
 
 .last-wrapper {
 display：inline-block; 
 vertical-align：bottom; 
 overflow：hidden; 
 width：0; 
转换：全1; 
} 
 
 .last {
颜色：红色; 
} 
 
 .name：hover .last-wrapper {
 width：auto; 
 
  

解决方案

您可以使用 max-width ，因为它不适用于 width：auto 。

只要确保 max-width 的值足够大以容纳最宽的文本，或者您需要一个脚本来计算负载。

因为 max-width 会比某些内容宽一些，所以可以在倒过来时使用较短的时间来使用它在较宽的文本上更好。

  .name {border：1px solid lightgrey; margin：10px auto 0px auto;填充：5px;宽度：300px; font-size：2em; text-align：right;溢出：隐藏; white-space：nowrap;}。first {font-style：italic;}。last-wrapper {display：inline-block; vertical-align：bottom;溢出：隐藏;最大宽度：0; transition：all 0.3s;}。last {color：red;}。name：hover .last-wrapper {max-width：100px; transition：all 0.7s;}  

< div class = 名称 > < span class =first> John< / span> < div class =last-wrapper> < span class =last> Doe< / span> < / div>< / div>

I have a div where I want to show the name of a person.

I want to only show the person's first name in the normal state. When you hover, the last name should appear on the right of the first name, with its width expanding from 0 to normal width. All this text is aligned to the right.

If I apply the transition to the last name span it doesn't even show it.
I also tried with max-width (as a guy does here: http://jsfiddle.net/qP5fW/87/ ) but it doesn't work. So I made a wrapper div, used width instead of max-width and now it works, only it doesn't show the transition at all.

I suspect the problem is with the "auto" property but if anyone knows how to make the transition work, I would be very grateful.

Here's my fiddle: https://jsfiddle.net/drywrsy6/

HTML:

<div class="name">
  <span class="first">John</span>
  <div class="last-wrapper">
    <span class="last">Doe</span>
  </div>
</div>

CSS:

.name {
  border: 1px solid lightgrey;
  margin: 10px auto 0px auto;
  padding: 5px;
  width: 300px;
  font-size: 2em;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  font-style: italic;
}

.last-wrapper {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  width: 0;
  transition: all 1s;
}

.last {
  color: red;
}

.name:hover .last-wrapper {
  width: auto;
}

解决方案

You can use max-width, as it won't work with width: auto.

Just make sure the max-width value is big enough to accommodate the widest text, or you need a script calculating this on load.

As the max-width will be somewhat wider than some content, one can have a transition duration with shorter time on reverse, to make it look better on less wide text.

.name {
  border: 1px solid lightgrey;
  margin: 10px auto 0px auto;
  padding: 5px;
  width: 300px;
  font-size: 2em;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  font-style: italic;
}

.last-wrapper {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  max-width: 0;
  transition: all 0.3s;
}

.last {
  color: red;
}

.name:hover .last-wrapper {
  max-width: 100px;
  transition: all 0.7s;
}

<div class="name">
  <span class="first">John</span>
  <div class="last-wrapper">
    <span class="last">Doe</span>
  </div>
</div>

这篇关于文本与CSS的宽度转换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！