css - 如何根据长度减小字体大小?

标签 css twitter-bootstrap responsive-design

目前,我在页面上有一些大文本,布局适用于短文本(长度约为 12-14 个字符),但超过这个长度就会溢出或换行。这是不可取的,所以我希望缩小尺寸以适合整个文本。

我研究过 FitText 和 BigText 等 JS 解决方案,但它们依赖于固定宽度。因为我使用的是 Bootstrap,所以我没有固定的宽度。

好的:http://tf2reputation.com/profile.php?id=76561197960947673
不好:http://tf2reputation.com/profile.php?id=76561198054504781

我也考虑过设置 white-space: nowrap 或截断,但我更愿意显示所有文本,但如果可能的话,要小一些。

最佳答案

FitText 确实适用于流体宽度。

来自github page :

Make sure your container has a width! display: inline elements don't have a width. Use display: block OR display: inline-block+ a > specified width (i.e. width: 100%).

粗体是我用来强调的。

查看 homepage对于 FitText 还表明看不到固定宽度的单位。

我还应该提到,没有一种原生 CSS 技术可以实现这一点。最接近的可能是 viewport relative lengths但这并不能解决您的问题。

我的补充意见(注意危险): 根据我的经验,当您遇到这样的问题时,这是因为您可能从设计方面看问题有点不对,如果您需要 Javascript布局保持完整,我认为需要重新考虑。维护一个设计通常比用一根 pry 棍把它敲到位要好。 结束意见

关于css - 如何根据长度减小字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24029054/

相关文章:

css - 导航菜单中的 Bootstrap 表单控件似乎无法正确调整大小

forms - 使用流体网格系统在 Bootstrap 上对齐输入

c# - 如何在 Asp.Net 中更改 ListBox 所选元素的背景颜色

html - 如何去掉背景图片的边距?

html - Bootstrap CSS 行的高度变化导致以下所有内容的跳跃和可用性问题

python - 样式表未从 Django 中的相对路径加载

html - 单页上的多个轮播不工作 bootstrap4

css - 如何使我的搜索结果列表具有响应性?

javascript - 按钮在手机上拉伸(stretch)

javascript - 如何为柱形图赋予动态颜色