如何创建响应式字体大小以匹配容器

Question

我试图将字体调整到容器的大小，只要调整它的字体大小就可以保持一行而不管多长时间。

这就是我所说的

#project_stats{

padding: 0;
width: 320px;
margin: 0;
border-right: 1px solid #ccc;


    pr1 {
    font-size: 2vw; overflow: hidden;
    letter-spacing: -1px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    color: black;
    }
}

有什么想法吗？

----编辑1 ------

HTML。

<% provide(:title, @project.name) %>
<div class="row">
  <div class="col-md-12" id="project_canvas">
    <div class="row">
      <div class = "col-md-3" id="project_stats">
        <pr1><%= @project.name %></pr1>
         ........

更新到CSS

#project_canvas{

  background: white;
  width: 1600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  border-radius: 10px;
  padding: 30px;
  box-shadow: rgb(150,150,150) 5px 5px 10px;

    #project_stats{

    padding: 0;
    width: 320px;
    margin: 0;
    border-right: 1px solid #ccc;


    pr1 {
    font-size: 2vw; overflow: hidden;
    letter-spacing: -1px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    color: black;
    }
  }
}