CSS3：工具提示最大寬度與Word Wrap

嘗試在文本換行的情況下爲此工具提示應用最大寬度jsfiddle，但它應用默認寬度。CSS3：工具提示最大寬度與Word Wrap

HTML：

<div id="container" style="margin: 167px 135px 0px 0px; height: 400px"> 
<a class="tooltip" tip="television">content1</a> 
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a> 
</div>

CSS：

.tooltip{ 
display: inline; 
position: relative; 
white-space: pre-wrap;  /* css-3 */ 
margin: 20px 20px 20px 20px; 
height: 30px; 
width: 50px 
} 

.tooltip:hover:after{ 
background: #8FBC8F; 
border-radius: 5px; 
bottom: 26px; 
color: #000; 
content: attr(tip); 
left: 20%; 
padding: 5px 15px; 
position: absolute; 
z-index: 98; 
width:auto; 
min-width:50px; 
max-width:500px; 
} 

.tooltip:hover:before{ 
border: solid; 
border-color: #8FBC8F transparent; 
border-width: 6px 6px 0 6px; 
bottom: 20px; 
content: ""; 
left: 50%; 
position: absolute; 
z-index: 99; 
}

當工具提示文本是越來越字包裹，寬度應去到一些最大寬度，而不是默認的寬度，使其方便閱讀。

這個jsfiddle工作時，我把顯示器：內聯表;像下面

.tooltip:hover:after{ 
: 
: 
display: inline-table; 
}

但它只能在Chrome中，而不是在IE

來源

2014-01-22 Seenu

你沒見過小提琴嗎？ http://jsfiddle.net/Seenu/yjYW4/當工具提示中的文本獲得單詞包裝時，寬度應該達到某個最大寬度而不是默認寬度，以便便於閱讀。 – Seenu

請改變你的CSS最小寬度和最大寬度象下面這樣：

.tooltip:hover:after{ 
    background: #8FBC8F; 
    border-radius: 5px; 
    bottom: 26px; 
    color: #000; 
    content: attr(tip); 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width:auto; 
    min-width:500px; /* I have changed here */ 
    max-width:500px; 
}

來源

2014-01-22 12:47:18 KoemsieLy

你必須使用display:inline和max-width和一些瀏覽器使用自動換行。有一個很好的教程來創建css3工具提示create css3 tooltip。

下面是該教程的一些代碼：

.tooltip 
{ 
display: inline; 
position: relative; 
} 
.tooltip:hover:after 
{ 
background: #333; 
background: rgba(0,0,0,.8); 
border-radius: 5px; 
bottom: 26px; 
color: #fff; 
content: attr(title); 
left: 20%; 
padding: 5px 15px; 
position: absolute; 
z-index: 98; 
width: 220px; 
max-width: 220px; 
}

來源

2016-06-08 06:43:27 adi

在同樣的問題迷迷糊糊的，經過一番擺弄發現以下解決我的情況：你有包裹提示內容的另一個元素，這將有你的預期工具提示寬度的最大寬度，絕對定位。然後包裝內容將使用此作爲基線最大寬度，同時包裝文本。

驗證了它在寫

Codepen的時間工作在最新公開的IE/EDGE /鍍鉻/ FF：https://codepen.io/jfhs/pen/LzbwgJ

在代碼：

<div class="tooltip"> 
<div class="tooltip-content-wrapper"> 
    <div class="tooltip-content">Long long text</div> 
</div> 
</div>

CSS：

來源

2017-09-25 11:43:46 jfhs

CSS3：工具提示最大寬度與Word Wrap

回答

相關問題