如何使用CSS根據上一個div元素的寬度調整文本大小？

Question

我有一個嘗試生成的標簽。 它具有以下結構。

  .name-box { width: 400px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; } .last-name { font-size: 26px; display:inline; overflow: hidden;} .first-name { display:inline; overflow: hidden;} 

  <div class="name-box"> <div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div> <div class="first-name">David</div> </div> 

我要做的是根據姓氏的長度更改名字的文本大小。 如果名字是“ Venckus-Stringfellow”並且我只剩下一點點空間，我希望名字的文本大小在7px左右。 但是，如果姓氏是“ Le”，那么我希望名字的文本大小為26px授予文本大小為26px的文本仍允許名字適合我的div必須達到的600px填寫標簽。 如何使用HTML / CSS做到這一點（如果我必須使用Javascript，那就可以了，不過還是想避免它）？

Answer 1

使用數學方程式中姓氏長度來設置名字大小的Javascript。 這是一個非常簡單的示例，如果您希望它是指數級的，則需要對其進行更改，並且可能應設置不能超出的上限和下限。

 var lastNameText = document.querySelector('.last-name').textContent; var firstName = document.querySelector('.first-name'); firstName.style.fontSize = (120 / lastNameText.length) + "px"; 

 .name-box { width: 600px; } .last-name { font-size: 26px; } .first-name: { font-size: 26px; } 

 <div class="name-box"> <div class="last-name">McDonald</div> <div class="first-name">David</div> </div> 

Answer 2

不幸的是，您將需要在這里使用javascript。 您可以使用視口百分比來關閉，但這適用於整個視口。 而且僅適用於一個容器，而不適用於先前的容器。 您需要做的是創建一個更新字體大小的算法，並在每次將HTML /文本加載到這些div運行它。

這樣的事情應該讓您入門：

function loadNames(var firstName, var lastName) {
    //GET THE LENGTH OF THE LASTNAME STRING
    var len = lastName.length;
    var factor = .7; //CUSTOMIZE THIS TO DO YOUR SIZING BASED ON THE FONT
    var fontSize = Math.ceil(factor * len); //GET THE NEW FONT SIZE, BASED ON THE LENGTH AND FACTOR, AND ROUNDED UP
    //SET THE TEXT OF THE NAMES
    $('firstName').Text(firstName);
    $('lastName').Text(lastName);
    //SET THE FONT SIZES
    $('firstName').css({ 'font-size': fontSize + 'px;' });
    $('lastName').css({ 'font-size': fontSize + 'px;' });
}

Answer 3

不幸的是，CSS解決方案是不可能的。 無法選擇部分文本輸入，並且在這個年齡段，此時需要進行一些無法使用CSS進行的計算。

但是javascript ..您是否正在尋找這樣的OP？

 $(document).on("ready", function(){ var ratio = 20; $(".name").keydown(function(){ var input_length = $(this).val().length / ratio; var new_size = (2 - input_length < 1 ? 1 : 2 - input_length); $(this).css("font-size", new_size+"em"); }); }); 

 input { width: 40em; margin: 0 auto; display: block; padding: 15px; } .main-wrapper { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-wrapper"> <input class="name" type="text" placeholder="Enter name" /> </div> 

Answer 4

這是您可以實現結果的另一種方法。 也許可能根本不使用表格，但是每個div應該使用display:inline-block; 屬性。

 $scalingL = $('.last-name').width(); $scalingF = $('.first-name').width(); $('.first-name').css('font-size',($scalingL / $scalingF * 26)); 

 .name-box { width: 600px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; } .last-name { font-size: 26px; overflow: hidden; display:inline-block;} .first-name { font-size: 26px; display:inline-block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="name-box"> <table> <tr> <td> <div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div> </td> </tr> </tr> <td> <div class="first-name">Something</div> </td> </tr> </table> </div> 

Answer 5

Try this:
            <style type="text/css">


                .name-box{
                    width:auto;
                    overflow:auto;

                }

                #first-name{

                    display:inline-block;
                    width:auto;
                    clear:both;
                    float:left;
                    font-size:1px;

                    }

                    #last-name {

                    display:inline-block;
                    width:auto;
                    clear:both;
                    float:left;
                    font-size:26px;
                }

                </style>
                <div class="name-box">
                    <div id="last-name">McDonalds</div>
                    <div id="first-name">David</div>
                </div>

                <script type="text/javascript">
                var ln = document.getElementById("last-name");
                var fn = document.getElementById("first-name"); 



                for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
                {

                    fn.style.fontSize=(i)+"px";
                }


                </script>

 <style type="text/css"> .name-box{ width:auto; overflow:auto; } #first-name{ display:inline-block; width:auto; clear:both; float:left; font-size:1px; } #last-name { display:inline-block; width:auto; clear:both; float:left; font-size:26px; } </style> <div class="name-box"> <div id="last-name">McDonalds</div> <div id="first-name">David</div> </div> <script type="text/javascript"> var ln = document.getElementById("last-name"); var fn = document.getElementById("first-name"); for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5) { fn.style.fontSize=(i)+"px"; } </script>