css - テキストの周りのスペースを動的に削除するにはどうすればよいですか？

Question

コンテナ内のテキストの上下にある「スペース」を削除できるようにしたいと思います。

ここに画像の説明を入力してください

divは、内部のテキストにできるだけ近づける必要があります。このテキストは入力の結果であり、ユーザーが変更できます。

行の高さで作業する必要があると思いますが、どうすればよいですか？

アドバイスをいただければ幸いです。

score 6 · Accepted Answer

6

慣れているline-height

.some_css{
line-height: px; // according to your text size of design 
}

于 2012-12-06T10:29:59.223 に答える

score 2 · Accepted Answer

CSSpaddingプロパティを使用して、要素の境界内にスペースを設定します。

padding:0;

さらに、Terricが指摘しているように、子供にマージンがある場合は、それを削除します。

margin:0;

score 2 · Accepted Answer

padding: 0'を使用するか、試すことができますline-height:px

パディングは何をしますか

ゼロパディング

と線の高さ

score 1 · Accepted Answer

タイトルで説明されているように、テキストの周囲のスペースを「動的に」削除する必要がありました。実際、すべてのフォントは異なる構造を持っており、すべてのブラウザで同じようにレンダリングされるわけではありません...

私はこれに対する妥協点を見つけました：

.text { line-height: 70% }

ここで説明するように、パーセンテージを使用すると、テキストに任意のフォントサイズを適用でき、行の高さは常に同じになります。

jQueryを使用してフォントサイズを変更できます。行の高さは、テキストと周囲の要素に常に適切に適用されます。

フォントごとに大文字と小文字を区別して、異なる行の高さを適用しました。私の場合、これは実用的なソリューションです...

var fontFamily = $( "input" ).val(); // Here, the font-Size is defined dynamically by the user... It could be Arial, Verdana, Comic etc...
var lineHeight;

switch ( fontFamily ){

    case "Arial Black": // if the user has selected the arial black font...
        lineHeight = "70%"; // we define a line-height that will be correctly applied to the text
        break;
    case "Verdana":
        lineHeight = "78%";
        break;
    default:
        lineHeight = "66%";

}

$( ".text" ).css("line-height", lineHeight); // we apply the line-height to the text...

ユーザーは別のselect要素でフォントサイズを変更することもできることに注意してください...

これがお役に立てば幸いです...

css - テキストの周りのスペースを動的に削除するにはどうすればよいですか？

4 に答える 4

Related

Reference