Text is going to outside of box (CSS Issue)

Question

I'm getting link address from db and it's showing on a div box with html h3 tag which class name is .images. This css class images width is 210px. But unfortunately this link address is going to outside the box.. It's should be within the box. Could you tell me what is the wrong in my css code ?

Css code:

.images{
max-width:210px;    
float:left;
position:relative;
margin:15px 30px 15px 0;
border:0px #000 solid; 
}
.images h3 a{width:210px !important; height:auto;}      
.images img{    
margin:0;
padding:5px;
border:1px #ccc solid;  
}

pho code:

while($res =  mysql_fetch_array($iamges)){

echo "<div class='images'>";

        $image = $res['image']; 
        $directory = "galary_images/";  
        $link =  inputvalid($res['link']);  

echo "<h3><a href='$link' target='_new'>$link</a></h3>";        

        if(empty($link))
        {
            echo "<img src='$directory/$image'>";   
        }
        else
        {
                echo "<a href='$link' target='_new'><img src='$directory/$image'></a>";

        }   
echo "</div>";
}

what should happen with the link? You want it to be cut off or wrap or ..? — harpax, Nov 25 '13 at 16:29
@harpax whatever link length it is. it's should be show within the box. — Alex, Nov 25 '13 at 16:30
well, since a link can't wrap (no whitespaces) the only solution I could think of would be to reduce the font-size based on the length, which could be done with javascript: [jquery plugins](http://www.jquery4u.com/plugins/auto-text-fill-resize-plugins) and [a similar question](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) — harpax, Nov 25 '13 at 16:40
@harpax so I can't show this link address within the box IF it's has no space. right ? — Alex, Nov 25 '13 at 16:42
obviously .. if the space of your box can hold ~100 chars, than 200 won't fit — harpax, Nov 25 '13 at 16:50

score 0 · Answer 1 · answered Nov 25 '13 at 16:30

0

Have you tried setting an

overflow:hidden

in your css for .images?

answered Nov 25 '13 at 16:30

Visiophobia

153
3
8

Well, If i use this overflow:hidden then it's don't show the full link address. – Alex Nov 25 '13 at 16:34
if the link has no spaces then it cannot wrap within the box. You could try overflow-x:scroll – Visiophobia Nov 25 '13 at 16:36

score 0 · Accepted Answer · answered Nov 25 '13 at 16:32

Since the link has no spaces in between, they cannot be broken into seperate lines. you can use code like this :
$link = "long link";
<a href = "long link">echo (strlen()<=10)?$link:substr($link, 0 ,7)."...";
</a>



Say link is http://stackoverflow.com/questions/20198005/text-is-going-to-outside-of-box-css-issue,
it will display something like this :  http://stackoverflow.com on the name of the link but will send you to the same place.

Text is going to outside of box (CSS Issue)

2 Answers2