我有一个固定高度（30像素）但宽度可变的容器，它向用户显示错误消息和警报。通常情况下，消息是两个或三个字，并且看起来很好，但是当显示较长的消息时，消息将显示两行，并在容器外用于显示消息。调整任意长度文本以适应可变宽度，固定高度容器

我正在寻找一些方法来重新调整消息大小，以便它始终适合容器内。随着宽度的减小，文本会变得更小，直到足够小，以使两行适合30px高的容器，然后它会这样做。

HTML

<body> 
<div class="go-nogo-box"> 
    <div class="go-nogo-container"> 
     <h2 class="go-nogo-status">Error Message!</h2> 
    </div> 
</div>

CSS

.go-nogo-box{ 
width: 80%; 
margin:0 auto 10px auto; 
} 

.go-nogo-container h2{ 
    height: 50%; 
} 

.go-nogo-container{ 
    border-color: #999; 
    border-width: 1px; 
    border-style: solid; 
    clear: both; 
    padding:15px; 
    background-color: #FFFFFF; 
    border-radius: 40px; 
    height: 30px; 
} 
.go-nogo-status{ 
    font-weight: bold; 
    text-align: center; 
    font-size: 32px; 
    font-variant: small-caps; 
    font-family: Arial, Helvetica, sans-serif; 
} 

@media (max-width: 1100px){ 
    .go-nogo-box{ 
     width:100% 
    } 
}

请检查出JS小提琴链接，它允许您选择不同长度的消息（实际的程序将从发送消息后端）。

https://jsfiddle.net/alphabetaparkinglot/4rwb6j56/5/

我曾尝试推行FitText.js，但同时我可以得到它的任何一个消息的工作好了，它不会以同样的方式处理任意长度的消息。

对于它的价值是：我已经找到了我的一个类似的问题，但它与图像，而不是文本交易，所以解决的办法是比我感兴趣的完全不同：Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

来源

2016-03-03 Brian C

你试试这个：http://simplefocus.com/flowtype/？ –

这并没有帮助我害怕。（还是）感谢你的建议。 –

更新答案

看到这个new fork。只是做了一点用JavaScript怪异的东西，试图找到基于宽度为字体大小的最佳比例：

原来的答案

一个可能只CSS的解决方案是基于vw您的字体大小。这是fork of your fiddle。有关CSS部分是：

.go-nogo-status{ 
    font-weight: bold; 
    text-align: center; 
    font-size: 3vw; /* here */ 
    font-variant: small-caps; 
    font-family: Arial, Helvetica, sans-serif; 
}

不同的屏幕尺寸：

这被称为 “视口大小的版式”，这里是一个relevant article on CSS tricks。

相对于当前视口大小，vw，vh和vmin，CSS3有一些用于确定事物大小的新值。

在某些情况下，可能会有些挑剔，所以您可能需要使用CSS尺寸来尝试找到最适合您的用例的值。

来源

2016-03-04 00:10:58

谢谢！我也尝试过vw，但IE仍然让它有时会从容器中出来。当它有足够的空间进入下一条线时，它会继续缩小。如果您将小提琴的大小调整得更小，则第一张照片中的文字会变得越来越小，而不是像“地方”那样添加“我需要适合其全部使用” 。纯CSS解决方案并不是必要的，反正这个网站上运行着大量的javascript。 –

@AlphaBetaParkingLot用另一次尝试更新了我的答案 –

再次感谢。技术上符合我给出的描述，但是以使文本不必要地小而难以阅读为代价，请注意，即使是非常短的消息也会缩短为长时间的消息。所以这不符合我的需要。但+1为你的帮助没有那么少。我会继续玩。 –

您已在可变宽度容器中指示可变长度消息，其中必须保留在一行上。这有一些含义：

最大字符数。如果消息包含1000个字符会发生什么？ 2000？
最小文本大小。在用户难以辨认之前，文本有多小？
容器的最小宽度。

这些值应该为JavaScript或CSS解决方案定义。 FitText应该为你工作。

设置您的页面，其中包含消息的最大字符数，并将浏览器设置为最小宽度。然后调整FitText函数以使文本易读并放入容器中。

这可能会为你使用FitText工作：

$(".go-nogo-status").fitText(4, { minFontSize: '15px', maxFontSize: '32px' });

和下面的行添加到您的CSS

.go-nogo-container{ 
    white-space: nowrap; 
}

来源

2016-03-04 02:02:45 Robert

我从来没有说过它需要在一条线上。只有它不能离开容器。容器的高度为30px，因此2行12px高的字体完全可以接受。 –

我现在不在我的电脑，但会明天再试。 –

调整任意长度文本以适应可变宽度，固定高度容器

回答

更新答案

原来的答案

相关问题