Twitter中的面板文本对齐引导

问题描述：

我想创建这个移动应用程序，当我缩小窗口大小到最小大小，但所有地狱崩溃。Twitter中的面板文本对齐引导

文字环绕，因此面板对齐中断。我尝试了各种风格，但无法使其工作。请帮忙。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta charset="utf-8"> 
<title>Bootply snippet - Boxed Layout (SO)</title> 
<meta name="generator" content="Bootply" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<meta name="description" content="" /> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"> 

<link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png"> 




</head> 



<body > 

<h2 class="text-center">Club</h2> 
<div class="container"> 
<div class="foo col-xs-6 col-md-3"> 
<div class="panel panel-default"> 
<div class="panel-heading text-center" >Candy Crush</div> 
<div class="panel-body"> 
<img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/> 
</div> 
</div> 
</div> 
<div class="foo col-xs-6 col-md-3"> 
<div class="panel panel-default"> 
<div class="panel-heading text-center">Whack</div> 
<div class="panel-body"> <img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/> 
</div> 
</div> 
</div> 
<div class="foo col-xs-6 col-md-3"> 
<div class="panel panel-default"> 
<div class="panel-heading text-center">Title</div> 
<div class="panel-body"> <img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/> 
</div> 
</div> 
</div> 
<div class="foo col-xs-6 col-md-3"> 
<div class="panel panel-default"> 
<div class="panel-heading text-center">Quake</div> 
<div class="panel-body"> <img class="img-responsive center-block" width="310" height="310" alt="Cinque Terre" src="https://cdn2.iconfinder.com/data/icons/pack1-baco-flurry-icons-style/512/Game_Center.png"/> 
</div> 
</div> 
</div> 
</div> 

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 



</body> 
</html>

答

尝试把这种风格上面板标题：

style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;"

工作般的魅力 –

Twitter中的面板文本对齐引导

相关推荐