css - 如何在绝对位置上给出最大宽度

.tooltip{
  display: inline-block;
  position: relative;
}
.tooltip-outer  {
  visibility: hidden;
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-size: 13px;
  word-wrap: break-word;
  opacity: 0;
  text-align: left;
}

.tooltip-inner  {
   max-width: 200px;
   padding: 3px 8px;
   color: #fff;
   background-color: #000;
   border-radius:2px;
}

.tooltip:hover .tooltip-outer{
    visibility: visible;
    opacity: 1;
}

[tooltip-direction = 'right']
{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="tooltip">
  hover me
  <div class="tooltip-outer" tooltip-direction="right">
    <div class="tooltip-inner">
      Don't let fear or insecurity stop you from trying new things.
    </div>
  </div>
</div>

在上面的代码中，我为父级使用了相对位置，为子级使用了绝对位置，因此，没有考虑我的最大宽度。

如何设置绝对位置的最大宽度？

最佳答案

.tooltip{
  /*display: inline-block;*/
  position: relative;
}
.tooltip-outer  {
  visibility: hidden;
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-size: 13px;
  word-wrap: break-word;
  opacity: 0;
  text-align: left;
}

.tooltip-inner  {
   max-width: 200px;
   padding: 3px 8px;
   color: #fff;
   background-color: #000;
   border-radius:2px;
}

.tooltip:hover .tooltip-outer{
    visibility: visible;
    opacity: 1;
}

[tooltip-direction = 'right']
{
  left:80px; /*change this line*/
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="tooltip">
  hover me
  <div class="tooltip-outer" tooltip-direction="right">
    <div class="tooltip-inner">
      Don't let fear or insecurity stop you from trying new things.
    </div>
  </div>
</div>

关于css - 如何在绝对位置上给出最大宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46924161/