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;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

尝试这个没有绝对位置

＆＃13;

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

＆＃13;

如何使进度条标签流出栏

2 个答案: