SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    dropping the text with no space

    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>layOut</title>
    <style type="text/css"> 
    
    #domainLogo{
    margin-right: 230px;
    }
     
    #sideBar {
     float: left;
     width: 230px; 
     margin-left: -230px; 
     background: #aaffff;
    }
    
     
    .guest-login {
     float:left;
     width:180px;
     background: #fff ;
     padding:0px 0px 3px 50px;
    }
     
    .guest-login p{margin:0}
    .guest-login span, .guest-login strong {
     border:1px solid #555;
     background:#88ffff;
     padding:2px;
     overflow:hidden;
     display:block;
     text-align:center;
    }
     
    .guest-login span {
     float:left;
     margin:0 3px 0 0;
    }
    .top span {
     float:right;
     margin:0 0 0 3px;
    }
    .hr {
     clear:both;
     border:1px solid #555;
     background: #88ffff;
     padding:2px;
     margin:4px 0px;
    }
     
    .hr hr {
     position:absolute;
     left:-999em;
    }
    .guest-login div { clear:both }
     
     
    </style>
    </head>
     
    <body>
     
    <div class="fullWrapper">
    <div id="domainLogo">
     <a href="">myDomain1myDomain2myDomain3myDomain4myDomain5myDomain6myDomain7myDomain8myDomain9myDomain10myDomain11myDomain12myDomain13myDomain14myDomain15myDomain16myDomain17myDomain18myDomain19myDomain20</a>
    </div>
    </div>
     
    <div id="sideBar">
    <div class="guest-login" >
      <div class="top folor">
        <p><span>00</span><strong>Guest</strong> </p>
      </div>
      <div class="hr"><hr></div>
     
      <div>
        <p class="folor"><span>00</span> <strong>Login</strong></p>
      </div>
    </div>
    </div>
     
     </body>
    </html>
    The code above is some part of the full code at http://dot.kr/x-test/layOut01/

    In domainLogo div, there are long text without any space.
    If the text is short, no problems.
    But when text is very long like the http://dot.kr/x-test/layOut01/, the last part of the text is behind guest-logIn part and go farther to right and the horizental scroll bar is created at the bottom of the browser.

    Can I make the layout to automatically dropping the text when the text is very long inside the domainLogo div with your help?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You gave us the exact same links.

    But you have a few options .
    http://www.visibilityinherit.com/code/wrap-text.php
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    word-wrap:break-word;
    might be what you are looking for.

    hope that helps

  4. #4
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, RyanReese and dresden_phoenix.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •