迫使h1留在1行

我有一個寬度和高度在250px的div。 div內的h1具有50px的高度。向我的網站添加新內容的人可以在框內填寫任何他們想要的內容。迫使h1留在1行

當h1上的文本太長時，文本進入第2行（請參閱圖片和右側的框）。

我的問題是我如何強制h1留在像圖片上的左框一樣的框內。

2017-06-22 Bas

凡示例代碼和你嘗試過什麼？也許'文本溢出：隱藏'？ – Siva

在旁註中，「verassing」拼寫錯誤。（意思是「把東西變成灰燼」，即火化） –

你不能在一行留下h因爲parent只有width:250px;。因此，如果您將width:100%分配給兒童，則只需要width:250px;。嘗試使用white-space:nowrap財產，如果你requried

Check here

來源

2017-06-22 10:35:43

這個工程，但然後h1的最後部分被切斷 – Bas

沒有你.. –

檢查與https://jsfiddle.net/nr5x0hky/ –

我想你正在尋找的是CSS屬性white-space: nowrap;

來源

2017-06-22 10:36:16

這個工程，但然後h1的最後部分被切斷 – Bas

然後，如果你想至少有一個更好的切割，你可以添加一個「文本溢出：省略號」。 –

如果你想要的文字，以適應入行，而不必滾動或擴大寬度，您唯一的選擇是減少H1上的font-size。

要自動做到這一點，你可以用一個JS插件像FITTEXT：http://fittextjs.com/

來源

2017-06-22 10:39:39 Johannes

您可以使用white-space: nowrap防止包裝的文字。可選用overflow和text-overflow來控制行爲。

h1 { 
 
    width: 100px; 
 
    background: salmon; 
 
} 
 
.nowrap { 
 
    white-space: nowrap; 
 
} 
 
.overflow { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.text-overflow { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<h1 class="nowrap">Using white-space: nowrap</h1> 
 
<h1 class="overflow">Using overflow: hidden</h1> 
 
<h1 class="text-overflow">Using text-overflow: ellipsis</h1>

來源

2017-06-22 10:43:16

這是變通使用JavaScript。我在這裏做的是使用腳本的高度，並從中獲得內容的行數。基於這個價值，我們正在調整字體大小。

我在這裏應用的基本字體是20px，行高是50px。如果我們得到的高度是100，將會有2行文本，我將字體大小減小到20/2，並且使用該值，文本可以放在一行中。

如果您覺得它有幫助，您可以微調。乾杯!

$(document).ready(function() { 
 
       var actualHeight = $("h1 span").height(); 
 
       var fontSize = 20; 
 
       var fontRatio; 
 
       if(actualHeight > 50){ 
 
        fontRatio = actualHeight/50; 
 
        fontSize = 20/fontRatio; 
 
        $("h1 span").css('font-size', fontSize); 
 
       } 
 
      });

h1{ 
 
       width: 300px; 
 
       height: 50px; 
 
       line-height: 50px; 
 
       color: #000; 
 
       background: #999; 
 
       font-size: 20px; 
 
       position: relative; 
 
      } 
 
      h1 span{ 
 
       position: absolute; 
 
       top: 0; 
 
       left: 0; 
 
       width: auto; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> 
 
      <span> 
 
       orem ipsum dolor sit amet, orem ipsum dolor sit amet, consectetur adipiscing elitorem ipsum dolor sit amet, consectetur adipiscing elit 
 
      </span> 
 
     </h1>

來源

2017-06-22 11:32:24

迫使h1留在1行

回答

相關問題