如何让进度条标签流出bar

Question

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <style>
 span:hover, span:active{
 font-size: 150%;
 color: black;
 text-align: justify;
  line-height: 1.8;
  overflow:visible;
 }
 span{
 overflow:visible;
 }
 
 </style>
</head>

<body>
  <div class="row">
  <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
   <h5>MVC architecture</h5>
  </div>
  <div class="col-8 col-offset-2">
   <div class="progress" >
    <div class="progress-bar" role="progressbar" style="width: 46.66%; margin-left: 33.33%; height: 60px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
     <span>10 to 24 LPA</span>
    </div>
   </div>
  </div>   
  </div>
  <div class="row">
    <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
      <h5>MS-Access</h5>
    </div>
    <div class="col-8 col-offset-2">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 3.63%; margin-left: 2%; height: 40px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <span>0.6 to 1.5 LPA</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

The text in the progress bar doesn't fit in it and it is clipped. When hovered over the text, its font size increases but the text will remain hidden. What is the solution?

Answer 1

试试这个，文字会尽量适应你的进度条，很潮。所以你可以使用 position: absolute;

span:hover,
span:active {
  font-size: 150%;
  color: black;
  text-align: justify;
  line-height: 1.8;
  overflow: visible;
  margin: 0 0 0 -15px;
}

span {
  overflow: visible;
  position: absolute;
}

.progress-bar {
  height: 20px;
  border-radius: 0px;
}

.centered{
  text-align: center;
  width: 100%;
  margin: 8px 0 0 -20px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>

<body>
  <div class="row">
    <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
      <h5>MS-Access</h5>
    </div>
    <div class="col-8 col-offset-2">
     <span class="text-center centered">0.6 to 1.5 LPA</span>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 3.63%; height: 40px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        </div>
      </div>
    </div>
  </div>
</body>

Answer 2

在没有绝对位置的情况下试试这个

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <style>
 span:hover, span:active{
 font-size: 100%;
 color: black;
 
 }
 .progress> .progress-bar> span{
 overflow:visible;
  margin-top:45%;
  display:inline-block;
  position:relative;
  color:red;
  min-width:100px
  
 }
 
 </style>
</head>

<body>
  <div class="row">
    <div class="col col-12 col-md-2 col-lg-2 col-xl-2 col-offset-2 text-center">
      <h5>MS-Access</h5>
    </div>
    <div class="col-8 col-offset-2">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 3.63%; margin-left: 2%; height: 40px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <span>0.6 to 1.5 LPA</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

如何让进度条标签流出bar

how to make the progress bar label flow out of the bar

html

css

twitter-bootstrap-4