1

私の考えは、テキストの長さとフォント サイズに応じて、2 つのテキスト行が互いにどのように見えるかを div ショーケースにすることです。

問題は、固定幅の div でこれを紹介したいということです。

そのため、最も幅の広いテキスト行 (必ずしも最大のフォントを使用するものでも、最も多くの文字を使用するものでもありません) は、常に div の端に移動するようにサイズを変更する必要があります (1 行で)。

一方、幅がそれほど広くないテキスト行のフォント サイズも、2 行の比率を維持するためにサイズ変更する必要があります。

私はちょうどこのコードを書いています：

脚本

<script>
 function typeFunction() {
document.getElementById('boxOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxTwo').innerHTML = document.getElementById("lineTwo").value;

document.getElementById('boxPreviewOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxPreviewTwo').innerHTML = document.getElementById("lineTwo").value;

checkWidth();
}

function fontSize(fontsize,target) {
target.style.fontSize = fontsize;
checkWidth();
} 

function checkWidth() {
ratio = document.getElementById("sizeOne").value.replace(/\D/g, '')/document.getElementById("sizeTwo").value.replace(/\D/g, '');

widthOne = document.getElementById("boxOne").offsetWidth;
widthTwo = document.getElementById("boxTwo").offsetWidth;

if (widthOne >= widthTwo) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE/ratio";
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE*ratio";
}
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE*ratio";
} else {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE/ratio";
}
}
}
</script>

HTML

Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>


Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>

コードと概念シナリオのイメージのサンプル イメージを次に示します。
ここに画像の説明を入力

ここに画像の説明を入力

それは私が一人で行くことができる限りです、私は恐れています。
明らかに、まだかなりの距離があります。

  1. テキスト入力を一度だけミラーリングしたいのですが、それでは最も広い行を見つけることができないと思います。
  2. 呼び出された「MAX_FONT_SIZE」を取得する方法がわかりません
4

4 に答える 4

0

jQueryプラグインに満足しているかどうかはわかりませんが、満足している場合は、これが適切な選択となる可能性があります。

http://www.zachleat.com/web/bigtext-makes-text-big/

使い方はとても簡単です。プロジェクトページのデモは次のとおりです。http：//jsfiddle.net/zachleat/WzN6d/

HTMLを次のように変更します。

<div class="Mainbox" style="width:400px;border:1px solid black">
    <div id="boxPreviewOne">This is line one</div>
    <div id="boxPreviewTwo">This is line two</div>
</div>

次に適用します：

$('.Mainbox').bigtext();​

これがあなたのコードの実際の例です：http： //jsfiddle.net/TqK4M/1/

于 2012-10-14T21:04:21.307 に答える
0

これにより、多かれ少なかれ必要なことを行う必要があります。

$(".linecontainer").each(function() {
    var maxWidth = $(this).width();
    var largestWidth = 0;
    var largestSpan;
    $(this).find("span")
        .each(function() {
            $(this).data("originalSize", parseInt($(this).css("font-size")));
            if ($(this).width() > largestWidth)
            {
                largestWidth = $(this).width();
                largestSpan = $(this);
            }
        });
    var largestSizeFound = false;
    var largestSize = 0;
    var sizeRatio;
    while (largestSizeFound == false && largestSize < 1000)
    {
        largestSize++;
        largestSpan.css("font-size", largestSize + "px");
        if (largestSpan.width() > largestSpan.parents(".linecontainer").width())
        {
            largestSize--;
            largestSizeFound = true;
            sizeRatio = largestSize / largestSpan.data("originalSize");
        }
    }
    $(this).find("span")
        .each(function() {
            $(this).css("font-size", parseInt(sizeRatio * $(this).data("originalSize")) + "px")
        })
});​

HTML

<div class="linecontainer">
    <div><span class="lineone">this is the first line of text</span></div>
    <div><span class="linetwo">another line of text</span></div>
</div>

CSS

.linecontainer { width:250px; overflow:hidden; }
.linecontainer span { white-space:nowrap;  }
.lineone { font-size:20px; }
.linetwo { font-size:10px; }​

http://jsfiddle.net/SZG7E/

于 2012-10-14T23:14:04.737 に答える
0

私はあなたの答えを実際に実装するのに十分なスキルがないため、jquery でタグ付けして申し訳ありません。

私はここで私の解決策の一部を見つけました: Auto-size dynamic text to fill fixed size container

于 2012-10-14T21:52:51.260 に答える
0

これは、あなたが望むことを行うjQueryソリューションです。font-size に単位を使用emすると、はるかに簡単になります。右端のフィットは 100% 完璧ではありませんが、少し調整すれば改善される可能性があります。いくつかの CSS トリックが役立つはずです

概念は、テキストをオフスクリーン スパンに配置し、そのスパンの幅を取得して、コンテナーの幅と比較します。これにより、簡単なem計算が可能になります。

コードは非常に単純なので、多くの説明は必要ありません

デモ: http://jsfiddle.net/KxjHC/2/

于 2012-10-14T20:30:40.257 に答える