4

60文字から160文字程度までさまざまな一連のタイトルを表示しようとしていますが、大文字と小文字が異なります。一部はすべて大文字、一部はハーフキャップです。ほとんど小文字の場合、160文字のテキスト全体が希望の幅に収まりますが、大文字が増え始めると（幅が広くなる必要があります）、オーバーフローが始まります。

魅力的な固定witdhフォント（大文字と小文字の幅も同じ）を使用する方法、テキストを動的に縮小して収まるようにする方法、またはテキストがサーバー側で占めるスペースを認識して、動的に終了しますか？それとも、皆さんはより良い解決策を持っていますか？

4

7 に答える 7

9

オーバーフローを制御する

本当の秘訣は、テキストボックスのサイズに制限を設定し、オーバーフローの問題がないことを確認することです。オーバーフロー：hiddenを使用してこれを処理し、display：要素をブロックして必要な正確な寸法を与えることができます。

モノスペースはオプションです

はい、モノスペースフォントを使用できます。クロスブラウザソリューションが必要な場合は、選択できるフォントはごくわずかです。可変幅フォントを使用することもできます。モノスペースは、説明した大文字小文字の問題との一貫性を保つのに役立ちます。等幅フォントを使用すると、さまざまなテキストの長さで機能する適切な幅を選択するのに役立ちます。以下の例では、説明のために、250ピクセルの幅を任意に選択し、制限をはるかに超えるまで文字列を入力しました。

ラインの高さとマージン

テキストの行の高さをボックスの高さと一致させる必要があります。この場合、20ピクセルを使用しました。行の高さを作成する必要がある場合は、下マージンを追加できます。

補足：テキストはページ全体で何度も繰り返されるため、ここではh3を使用しました。一般に、より一般的なテキストには低レベルのヘッダーを使用することをお勧めします（セマンティックの選択のみ）。h1を使用しても同じように機能します。

<html>
<head>
<title>h1 stackoverflow question</title>
<style type="text/css">

* { margin:0; padding:0 }

h3 { 
    display: block;
    width: 250px;
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    font-family: Courier, Lucidatypewriter, monospace;
    font: normal 20px/20px Courier;
    border: 1px solid red;
}

</style>
</head>
<body>

<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>&quot;C&quot; is for Cookie, that's good enough for lorem ipsum</h3>
<h3>Oh, it's a lorem ipsum dolor sit amet.  Adipiscing elit.</h3>

</body>
</html>
于 2008-10-03T21:56:30.900 に答える
3

あなたが「動的に終わりを切り落とす」と言うとき、私はCSSルールが次のようであると仮定するのは間違っていますか？

h1 {
    width: 400px; /* or whatever width */
    overflow: hidden;
}

あなたが望むように「終わりを切り落とす」でしょうか？

于 2008-10-03T21:39:01.420 に答える
2

省略記号ソリューションを試すこともできます。テキストを最大幅で切り捨て、省略記号を適用します。何かのようなもの：

私のタイトルはこれには長すぎます...

CSS3 には text-overflow: 省略記号がありますが、使用できますが、Firefox ではサポートされていません。

Hedger Wang は、私が数回使用した回避策を見つけました。とても便利です。

于 2008-10-03T22:17:40.967 に答える
1

幅を固定してオーバーフローを非表示にすることができますが、style="width: Xpx; overflow: hidden;"

それは幅を制限し、幅が広すぎる場合は端を切り落とします。

于 2008-10-03T21:38:44.867 に答える
1

MrZebra はオーバーフローを隠す方法は正しいですが、使用したい魅力的な固定幅フォントがある場合は、CSS font-family で設定できます。ただし、フォントを使用していない人のために必ずフォールバックを提供してください。

必要に応じて、CSS を使用して「text-transform」で大文字化を強制することもできます (ただし、読んだところでは、それはあなたの望みではありません)。

font-variant:small-capsも機能する可能性があります。

于 2008-10-03T21:43:16.497 に答える
0

JavaScript を使用して、フォントの幅をプログラムでテストし、大きすぎる場合は、ステップを下げて再試行してください。幅をテストする代わりに、要素の高さが 1 行を超えているかどうかを確認します (フォント サイズを変更するため、ems で測定されます)。

var fontSize = "200%";  // your regular heading font size
var h1 = document.getElementById("myHeading");
while (h1.offsetHeight > oneLine) {
    fontSize *= (parseInt(fontSize) - 5) + "%";
    h1.style.fontSize = fontSize;
}

その「oneLine」ビットを自分で把握する必要があります。申し訳ありません。

于 2008-10-03T22:08:23.747 に答える
0

<h1> の高さを制限しようとするのではなく、CSS を調整してサイトをより流動的にします。結局のところ、ユーザーがテキスト サイズを大きくした場合に、サイトが壊れて表示されないようにする必要があります。

h1 の高さをピクセルではなく ems で設定してみてください。これを CSS に追加すると、次のようになります。

body {
    font:62.5%/140% Courier, Lucidatypewriter, monospace;
}

1em = 10px になるため、見出しの高さを次のように設定できます。

h1, h3 {
    ....
    height:2em;
    ....
}

お役に立てれば。

于 2008-10-07T12:32:19.960 に答える