如何自動適合一個段落到一個div框中

我正在使用JQuery將<p>元素添加到div中，但是如果元素太長，它將會在div之外。如何自動適合一個段落到一個div框中

我希望它看起來像這樣：http://puu.sh/mvmEy/c17db01e4a.jpg

是否也可以自動調整文本字體大小？

HTML：

<div id="mainButton"></div>

CSS：

#mainButton { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    width: 100px; 
    height: 40px; 
    font-family: monospace; 
    font-size: 12px; 
    text-align: center; 
    line-height: 40px; 
    background: #808080; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 10px; 
    box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8); 
} 

#mainButton:hover { 
    background: #d3d3d3; 
} 

#mainButton:active { 
    top: 5px; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4); 
}

的javascript：

function changeMainButton() { 
    'use strict'; 
    $('#mainButton').empty(); 
    $('#mainButton').prepend('<p>' + mainButtonText + '</p>'); 
}

感謝您的幫助！ :)

來源

2016-01-14 Switch

標題你寫的合適，但在你的屏幕截圖中隱藏文字。你想要什麼？ – leguano

也許這可以幫助：

#mainButton { 
    ... 
    overflow: hidden; 
}

來源

2016-01-14 13:49:07 leguano

它似乎適合所有的div，但是有些文本沒有顯示。 http://puu.sh/mvmPZ/171b075df0.jpg – Switch

對不起，我誤解了你以前的評論，沒有意識到你是同一個人發佈這個。這是一個擴展視圖http://puu.sh/mvnEV/fd689fffa5 .JPG – Switch

可以使文本使用

#mainButton { 
word-wrap: break-word;  
}

調整到其容器還可以調整相對於字體大小爲其父元素使用JavaScript像http://simplefocus.com/flowtype/或http://fittextjs.com/但是如果你想控制它在顆粒狀使用@media，em和rem

來源

2016-01-14 14:36:29

如何自動適合一個段落到一個div框中

回答

相關問題