html – CSS工具提示不会拉伸,只能有固定的宽度

概述我有工具提示,其内容可以从很长到很短.我不想拥有3个单词的内容,并且有一个巨大的工具提示,但我也不想要20个单词,并且已经将它们全部放在多行上.使用此电流设置,无论如何都会保持卡在最小宽度. CSS： .tooltip { outline: none; position: relative; min-width: 75px; max-width: 255px;}.tooltip .t 我有工具提示,其内容可以从很长到很短.我不想拥有3个单词的内容,并且有一个巨大的工具提示,但我也不想要20个单词,并且已经将它们全部放在多行上.使用此电流设置,无论如何都会保持卡在最小宽度.

CSS：

.tooltip {  outline: none; position: relative;  min-wIDth: 75px; max-wIDth: 255px;}.tooltip .tool-content {  opacity: 0; visibility: hIDden;  position: absolute;}.tooltip:hover .tool-content {  background: #999; border: 1px solID #555; color: #000000;  /* general styling */  position: absolute; left: 1.3em; top: 2.6em; z-index: 99;  visibility: visible; opacity: 1;}

HTML：

<div class='tooltip'>(content to hover)    <span class='tool-content'>        (tooltip content)    </span></div>

令我感到困扰的是,我可以脱掉位置：相对而且它按预期工作！然而,我找不到任何解决方法,并且相对定位是让CSS徘徊的关键(或似乎是？).

解决方法

.tooltip {  outline: none;  position: relative;  wIDth: 75px;  min-wIDth: 75px;  max-wIDth: 255px;}.tooltip .tool-content {  margin:0;  padding:0;  opacity: 0;  visibility: hIDden;  position: absolute;  wIDth:100%;  height:100%;}

您可以删除span并将其替换为块级元素(如带样式显示的div：block)

总结

以上是内存溢出为你收集整理的html – CSS工具提示不会拉伸,只能有固定的宽度全部内容，希望文章能够帮你解决html – CSS工具提示不会拉伸,只能有固定的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。