Question

我正在使用JQuery将<p>元素添加到div中，但如果mainButtonText元素中的p太长，则它将位于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>');
}

感谢您的帮助！：）

Answer 1

也许这可能会有所帮助：

#mainButton {
    ...
    overflow: hidden;
}

Answer 2

您可以使用

将文本调整为其容器

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

您还可以使用http://simplefocus.com/flowtype/或http://fittextjs.com/之类的javascript调整与其父元素相关的字体大小，但如果您想以粒度使用@media，em和rem

来控制它

如何自动将段落放入div框中

2 个答案: