如何让进度条标签流出进度条答案

【问题标题】：how to make the progress bar label flow out of the bar如何让进度条标签流出进度条
【发布时间】：2017-04-15 22:10:52
【问题描述】：

<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?

【问题讨论】：

标签： html css twitter-bootstrap-4

【解决方案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>

【讨论】：

但是文本从中心开始，向右流动……看起来不太好。我正在寻找所有可能的解决方案以使其看起来不错，无论是在进度条内部还是外部。
@SahithiPonangi 查看更新的，如果想要更好看和动态的进度条，你可以在这里找到很多：codepen.io/search/pens/…
但我不能在 htlm5 中使用中心。有其他选择吗？
@SahithiPonangi 是的

【解决方案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>

【讨论】：

MVC 架构

10 到 24 LPA
如果我在正文中使用上面的代码，我看不到文字
更改 margin-top 的值并在之后查看

MVC 架构