i trying create mobile app when shrink window size minimum size, hell breaks loose.
the text wraps, due alignment of panel breaks. tried various styles couldn't make work. please help.
<!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>
try putting style on panel title :
style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" 
Comments
Post a Comment