幅が350ピクセルのスパンがあります。それ以上のテキストがある場合は、スパンの右側に向かってまっすぐに出ます。テキストを強制的に段落にまとめるにはどうすればよいですか? Webで見つけたさまざまなことを試しましたが、何もうまくいかないようです。
これはIE 6以降で動作する必要があります。Firefoxでも動作するのであれば良いでしょう。
更新:
ここにもう少し情報があります。ツールチップを実装しようとしています。私のコードは次のとおりです。
[〜#〜] html [〜#〜]
<td style="text-align:left;" nowrap="nowrap" class="t-last">
<a class="htooltip" href="#">
Notes<span style="top: 40px; left: 1167px; ">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</li>
</ul>
</span>
</a>
</td>
[〜#〜] css [〜#〜]
.htooltip, .htooltip:visited, .tooltip:active
{
color: #0077AA;
text-decoration: none;
}
.htooltip:hover
{
color: #0099CC;
}
.htooltip span
{
display: inline-block;
/*-ms-Word-wrap: normal;*/
Word-wrap: break-Word;
background-color: black;
color: #fff;
padding: 5px 10px 5px 40px;
position: absolute;
text-decoration: none;
visibility: hidden;
width: 350px;
z-index: 10;
}
.htooltip:hover span
{
position: absolute;
visibility: visible;
}
ラッピングはさまざまな方法で実行できます。それらのうち2つについて説明します。
1.)テキストの折り返し-ホワイトスペースプロパティを使用 http://www.w3schools.com/cssref/pr_text_white-space.asp
2.)ワードラップ-ワードラッププロパティを使用 http://webdesignerwall.com/tutorials/Word-wrap-force-text-to-wrap
ところで、これらの2つのアプローチを使用して動作するためには、「display」プロパティを対応するspan要素のブロックに設定する必要があると思います。
ただし、、キリルがすでに述べたように、少し考えてみることをお勧めします。テキストを段落に強制することについて話している。パラグラフ。それはあなたの頭の中でいくつかの鐘を鳴らすはずですよね? ;)
表示テーブルには空白を使用する必要があります
Example:
legend {
display:table; /* Enable line-wrapping in IE8+ */
white-space:normal; /* Enable line-wrapping in old versions of some other browsers */
}
私はIE6で動作するはずのソリューションを持っています(そして間違いなく7+とFireFox/Chromeで動作します)。
あなたはspan
を使用して正しい軌道に乗っていましたが、ul
の使用は間違っていて、CSSは正しくありませんでした。
<a class="htooltip" href="#">
Notes
<span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</span>
</a>
.htooltip, .htooltip:visited, .tooltip:active {
color: #0077AA;
text-decoration: none;
}
.htooltip:hover {
color: #0099CC;
}
.htooltip span {
display : none;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 10px 5px 40px;
text-decoration: none;
width: 350px;
z-index: 10;
}
.htooltip:hover span {
display: block;
}
誰もがこれについて間違った方法で行っていました。コードは有効ではありません。ul
はa
に入れません、p
はa
に入れません、div
はa
に入れません、単にspan
を使用します(display
としてblock
にすることを忘れないでください。したがって、div
/p
などであるかのようにラップされます。