Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The longest word display incorrect issue #13691

Closed
Sylvanasse opened this issue May 27, 2014 · 1 comment
Closed

The longest word display incorrect issue #13691

Sylvanasse opened this issue May 27, 2014 · 1 comment
Labels
css

Comments

@Sylvanasse
Copy link

Here is my code

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h1 class="page-header">Hello, world!
        <small>This is a hello world page!</small>
    </h1>

    <div class="row">
        <div class="col-md-4">
            <h2 class="page-header">Part 1</h2>
            <p>methionylglutaminylarginyltyrosylglutamylserylleucyl-phenylalanylalanylglutaminylleucyllysylglutamylarginylly-sylglutamylglycylalanylphenylalanylvalylprolyphenylalany-lvalythreonylleucylglycylaspartylprolylglycylisoleucyl-glutamylglutaminylserylleucyllysylisoleucylaspartylthre-onylleucylisoleucylglutamylalanylglycylalanylasparthlal-anylleucylglutamylleucylglycylisoleucylprolylphenylalany-lserylaspartylprolylleucylalanylaspartylglycylprolylthreon-ylisoleucylglutaminylaspfraginylalanylthreonylleucylarfinyl-alanylphenylalanylalanylalanylglycylvalythreonylprolylalany-lglutaminylcysteinylphenylalanylglutamylmethionylleucylalan-ylleuoylisoleucylarginylglutaminyllysyhistidylprolylthreony-lisoleucylprolylisoleucylglycylleucylmethionyltyrosylalanyla-sparaginylleucylvalylphenylalanylasparaginyllysyglycylisoleuc-ylaspartylglutamylphenylalanylthrosylalanylglutaminylcysteinyl-glutamyllysylvalylglycylvalylaspartylserylvalylleucylvalylalnyl-aspartylvalylprolylvalylglutaminylglutamylserylalanylprolylpheny-lalanylarginylglutaminylalanylalanylleucylarginylhistidylasparag-inyvalylalanylprolylisoleucylprolylisoleucylphenylalanylisoleucyl-phenylalanylisoleucylcysteinylprolylprolylaspartylalanylaspartylas-partylaspartylleucylleucylarginylglutaminylisoleucylalanylseryltyr-osylglycylarginylglycyltyrosylthreonyltyrosylleucylleucylserylarginy-lalanylglycylvalylthreonylglycylalanylglutamylasparainylarginylalan-ylalanylleucylprolylleucylasparaginylhistidylleucylvalylalanyllysyll-eucyllysylglutamyltyrosylasparaginylalanylalanylprolylprolylleucylgl-utaminylglgycylphenylalanylglycylisoleucylserylalanylprolylaspartylg-lutaminylvalyllysylalanylalanylisoleucylaspartylalanylglycylalanylal-anylglycylalanylisoleucylserylglycylserylalanylisoleucylvalyllysyli-soieucylisoleucylglutamylglutaminylhistidylasparaginylisoleucylglu-tamylprolylglutamyllysylmethionylleucylalanylalanylleucyllysylvaly-lphenylalanylcalylglutaminylprolylmethionlysylal-anylalanylthreonylarginylserine</p>
        </div>

        <div class="col-md-4">
            <h2 class="page-header">part2</h2>
            <p>asl;djfkloabnqvlskmnlmv;zkx asldfjalwknef asdfjoasndvlaksjn a sdf jalsdk f alsjdf laskdjf l ajsdlfkl </p>
        </div>

        <div class="col-md-4">
            <h2 class="page-header">part3</h2>
            <p>alsjdfh a sdhfoa asdf a hgouwgftw sdgahsiodgb ! lasjdfl 1$&^(%*&$%sldkgafj alskdfj </p>
        </div>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

I tried it in Safari and Chrome in Mac OS X and the bootstrap version is 3.0.3.
When I put some of the longer English word in part1 that it will cover the part2.
Here is some of the test items, the words below is real exist in the real world:
(1)antipericatametaanaparcircumvolutiorectumgustpoops
(2)osseocaynisanguineoviscericartilagininervomedullary
(3)aequeosalinocalcalinoceraceoaluminosocupreovitriolie
(4)bababadalgharaghtakamminarronnkonnbronntonnerronntuonn-thunntrovarrhounawnskawntoohoohoordenenthurnuk
(5) lopadotemachoselachogaleokranioleipsanodrimhyp-otrimmatosilphioparaomelitokatakechymenokichlepiko-ssyphophattoperisteralektryonoptekephalliokigklopelei-olagoiosiraiosiraiobaphetraganopterygon
(6)methionylglutaminylarginyltyrosylglutamylserylleucyl-phenylalanylalanylglutaminylleucyllysylglutamylarginylly-sylglutamylglycylalanylphenylalanylvalylprolyphenylalany-lvalythreonylleucylglycylaspartylprolylglycylisoleucyl-glutamylglutaminylserylleucyllysylisoleucylaspartylthre-onylleucylisoleucylglutamylalanylglycylalanylasparthlal-anylleucylglutamylleucylglycylisoleucylprolylphenylalany-lserylaspartylprolylleucylalanylaspartylglycylprolylthreon-ylisoleucylglutaminylaspfraginylalanylthreonylleucylarfinyl-alanylphenylalanylalanylalanylglycylvalythreonylprolylalany-lglutaminylcysteinylphenylalanylglutamylmethionylleucylalan-ylleuoylisoleucylarginylglutaminyllysyhistidylprolylthreony-lisoleucylprolylisoleucylglycylleucylmethionyltyrosylalanyla-sparaginylleucylvalylphenylalanylasparaginyllysyglycylisoleuc-ylaspartylglutamylphenylalanylthrosylalanylglutaminylcysteinyl-glutamyllysylvalylglycylvalylaspartylserylvalylleucylvalylalnyl-aspartylvalylprolylvalylglutaminylglutamylserylalanylprolylpheny-lalanylarginylglutaminylalanylalanylleucylarginylhistidylasparag-inyvalylalanylprolylisoleucylprolylisoleucylphenylalanylisoleucyl-phenylalanylisoleucylcysteinylprolylprolylaspartylalanylaspartylas-partylaspartylleucylleucylarginylglutaminylisoleucylalanylseryltyr-osylglycylarginylglycyltyrosylthreonyltyrosylleucylleucylserylarginy-lalanylglycylvalylthreonylglycylalanylglutamylasparainylarginylalan-ylalanylleucylprolylleucylasparaginylhistidylleucylvalylalanyllysyll-eucyllysylglutamyltyrosylasparaginylalanylalanylprolylprolylleucylgl-utaminylglgycylphenylalanylglycylisoleucylserylalanylprolylaspartylg-lutaminylvalyllysylalanylalanylisoleucylaspartylalanylglycylalanylal-anylglycylalanylisoleucylserylglycylserylalanylisoleucylvalyllysyli-soieucylisoleucylglutamylglutaminylhistidylasparaginylisoleucylglu-tamylprolylglutamyllysylmethionylleucylalanylalanylleucyllysylvaly-lphenylalanylcalylglutaminylprolylmethionlysylal-anylalanylthreonylarginylserine
@cvrebert cvrebert added the css label May 27, 2014
@cvrebert
Copy link
Collaborator

Not a Bootstrap-level bug. Use a tiny bit of custom CSS to tweak the line-wrapping/word-breaking/hyphenation strategy for your text (e.g. word-wrap, line-break, hyphens)
Also, upgrade to Bootstrap v3.1.1.

@zacechola zacechola mentioned this issue Jul 16, 2014
Closed
@cvrebert cvrebert mentioned this issue Apr 15, 2015
Closed
@twbs twbs locked and limited conversation to collaborators Apr 23, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cvrebert @Sylvanasse