擬似クラスの最大幅は？

Question

私は次のようにスパンに取り付けたCSSのツールチップを持っている：

<span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. "> 
    Has Tooltip 
</span> 

CSSは短いです：予想通り.mytooltip:hover:after{} width: 400pxと max-width: 400px; white-space: nowrap; 作品で

.mytooltip { 
    display: inline-block; 
    position: relative; 
} 
.mytooltip:hover:after { 
    content: attr(data-mytooltip); 
    display: block; 
    margin-top: 0.7rem; 
    margin-left: -1rem; 
    left: auto; 
    bottom: auto; 
    padding: .3rem 1rem; 
    position: absolute; 
    z-index: 98; 
    width: 400px; 
} 

。後者はあまり意味がありません。擬似要素は正しい幅を持っていますが、テキストは400pxよりも長いときに浮いているためです。 テキストが内部にラップされた疑似要素でmax-widthを使用する方法はありますか？

私はアドバイスに非常に感謝しています。

Answer 1

最後に、私は唯一のツールヒントのテキストは終わり、最大幅よりも長く、私ができる時に手動で

.mytooltip { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin:15px; 
 
    border: 1px solid red; 
 
    overflow:visible; 
 
} 
 

 
.mytooltip:hover:after { 
 
    content: attr(data-mytooltip); 
 
    display: table-cell; 
 
    margin-top: 0.7rem; 
 
    margin-left: -1rem; 
 
    left: auto; 
 
    bottom: auto; 
 
    padding: .3rem 1rem; 
 
    position: absolute; 
 
    z-index: 98; 
 
    max-width: 400px; 
 
    white-space:pre; 
 
    border: 1px solid #000; 
 
    overflow:hidden; 
 
}

<span class="mytooltip" data-mytooltip="Text here. Text here. &#xa;Text here. Text here. Text here. &#xa;Text here. Text here. Text here. Text here. "> 
 
    Has Tooltip 
 
</span>

テキストがで切断されたChromeの