相关疑难解决方法(0)

可能重复:
调整大小字体以适合div(在一行上)

我正在尝试使文本自动调整大小以完全适合静态200宽度100高度div.

基本上我想要最大的字体大小取决于div中提供的内容的长度.

我想尽量少用Javascript/Jquery.

我做了这个jsfiddle

html:

<div id="launchmain" >
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
    <div id ="maininvite">
        <h2> header</h2>
        <p>not a lot of text here but still overflowing</p>
    </div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>
</div>

用css:

html, body {
 height: 100%;
 width: 100%;    
}
#launchmain {
 width: 55%;
 display: inline-block;
 position: relative;
    top:10%;
    left:25%;
}
#launchmain:after {
    padding-top: 79.26%; 
    display: block;
    content: '';
    margin-top: 10px;
}
#box1
{
    border: 1px solid #000000;

    position: absolute;
    width:25.37%; 
    height:21.88%            
} …

我试图使文本100%的高度,div但它不起作用.
它只是100%的body { font-size:?; }.

有没有办法让它跟随div高度？
该div高度是整个页面的4%,我wan't文本跟随它,当你调整大小/分辨率的变化.

我有一种情况,我有一个div包含文本的容器元素().此文本有时会非常大 - 不是段落大,但它可能会超出文本的宽度.

显然,在大多数情况下,它只会敲文字到下一行的部分,但我想看看是否calc()可以用在font-size改变字体的大小,以确保它是在范围内始终配合的div是在这可以吗？

.name { width: 500px; font-size: 64px; }

<span class="name">Sometimes it is short</span>

<span class="name">Sometimes it is going to be really long, and people put long names</span>

我可以限制人们可以使用的字母数量 - 在某种程度上我会,但我很想知道这是否可以实现.

我发现这篇文章是用Javascript做的,但那是很久以前的事了,我认为CSS3有很多新东西可以让它在没有任何脚本的情况下完成.自动填充

可能重复:
调整大小字体以适合div(在一行上)

对于小型闪卡制造商应用程序,我需要设置正确的字体大小,以便文本将填充固定大小的容器的所有可用宽度; 喜欢这张图片中四个方框中的文字:

已经为此问题提供了使用PHP GD的解决方案.是否有客户端解决方案与css或JavaScript这个问题？

在我的html/css应用程序中,我有一个按钮的概念,实质上是.button具有一堆适当属性的类.这是一个简化的例子:

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}

<div class="button">
  <div class="button-text">
    Button text
  </div>
</div>

在少数地方,需要显示的文本相当长,但仍需要完全适合.由于font-stretch财产不支持,我使用transform: scale,它做我需要的 - 有点...除了上述,我有:

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

文本现在适合,但它不居中,因为在应用变换之前计算div中居中内容的位置 - 请参阅此jsfiddle中的示例:https://jsfiddle.net/1xz1g634/1/

我可以通过对其应用负左边距来"制造"它.button-text,但是这是一个黑客,并且在不同的浏览器中边距必须不同.

我怎样才能普遍地将该文本作为中心？理想情况下,不使用javascript,但是,如果其他一切都失败了,我可以使用javascript/jquery.

<div data-role="fieldcontain" style="font-size: 84%"  > <!-- style="width: 48% ; float: right" -->
  <fieldset data-role="controlgroup"   data-type="horizontal"  data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength -->
    <legend style="text-align: center ; ">????</legend>
    <input type="radio" name="radio-strength" id="radio-view-a" value="????" data class="blabla" style="background-color: #BF8F54;"/>
    <label  for="radio-view-a" >????: 10.50 &#8362;</label>
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="??????"   checked="checked"/>
    <label for="radio-view-b" >??????: 6.30 &#8362;</label>
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="???"  />
    <label for="radio-view-c" >???: 5.70 &#8362;</label>
  </fieldset>
</div>

Jquery Mobile Radio按钮:在上面的例子中,我设法通过试验和错误来适应水平单选按钮.

怎么能在代码中完成???

我需要在具有明确宽度/高度的框中显示一些文本.如果文本内容超过了框的高度,我希望被截断,最好是省略号.

我尝试过使用overflow: hidden,像这样:

<div style="width: 500px; height: 50px; 
     overflow: hidden; 
     border: 1px solid black;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut sem orci. Sed laoreet, diam sed porttitor rhoncus, erat ante volutpat metus, dignissim laoreet lacus dolor a nisi. Fusce elit libero, interdum vel cursus tincidunt, vulputate quis lorem. In accumsan pharetra mauris, id vulputate sapien condimentum in. Etiam quis laoreet lectus
</div>

但这通常导致一行文本部分可见,如下所示:

我想过计算字符并手动截断文本,但是当字体成比例时,这无济于事.