文字の幅の設定方法

段落の幅を文字数で設定したいと思います。そのために私はchユニットを使用しています。問題は、フォントファミリーを変更したときです。chユニットはモノスペースベースを使用していたようです。文字の幅の設定方法

関わらず、フォントファミリ（すべての上で動作）のを文字ベース幅を設定するには（唯一のCSS/HTMLでの）方法はありますか？

2017-11-09 Emily

異なるフォントは異なる文字の幅が異なるため、いいえ。例えば、ここではSOのデフォルトフォントを使用する8つのi文字があります：iiiiiiiここでは8つのIは等幅フォントです： 'iiiiiiii'（どちらも' font-size：13px'） – Narxx

私はそれを知っています。だから、私はその質問を控えさせてください。 CSSが特定の行の実際の文字カウントを取得できる方法はありますか？ – Emily

要素の幅は、2つの主な理由から、その中の文字数に基づいて設定することはできません。第一に、異なる文字の描画幅が異なります。 2番目：CSSは逆の働きをします。子要素は親に基づいて設定でき、その子に基づいて親を設定することはできません。 – Narxx

ないCSSソリューションわからしかし、

あなたはJavaScriptを使用して、このようなことを行うことができますが、それは非常に便利ではありません。ここ

デモ：https://jsbin.com/fecevopara/1/edit?html,css,js,console,output

どのように幅の変更を確認するために、HTMLでテキストを変更してください。

const container = document.getElementById('container') 
 

 
const textLength = container.innerText.length 
 

 
if (textLength > 10) { 
 
    container.style.width = '50px' 
 
} 
 
if (textLength > 20) { 
 
    container.style.width = '100px' 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="container" style="display: inline-block; width: 10px; background: #ccc"> 
 
    Some text goes hereeeee 
 
    </div> 
 
</body> 
 
</html>

のJavaScriptコード（ちょうど例のアイデア、すべての準備ができていない生産）：

const container = document.getElementById('container') 

const textLength = container.innerText.length 

if (textLength > 10) { 
    container.style.width = '50px' 
} 
if (textLength > 20) { 
    container.style.width = '100px' 
}

とHTMLは次のようになります。

<div id="container" style="display: inline-block; width: 10px; background: #ccc"> 
    Some text goes hereee 
</div>

基本的になりますcontainseのwidthスタイルプロパティを動的に変更するrは、内部の文字数に依存します。

出典

2017-11-09 16:12:35 Kunok

答えて

関連する問題