Safari ブラウザのテキスト オーバーフローの問題によりプロンプトが自動的に追加される

質問

テキストオーバーフローのある要素には、Safari ブラウザにタイトルプロンプトボックスが追加されます

理由

タイトルヒントは WebKit コアの一部ですが、デフォルトではオフになっています。これをオーバーライドして動作を有効にするのは Safari だけです。

解決

テキストがオーバーフローする要素の前に空のブロック要素を追加します。

.test{
		text-overflow: ellipsis;
		white-space: nowrap; 
		overflow: hidden;
		width:50px;
	}
.test::before {
  content: '';
  display: block;
}