Solved

prevent a long word from going into the next div

Posted on 2013-05-21
2
250 Views
Last Modified: 2013-05-21
<?php
$row_color='blue';
echo'
<style>
    div.col1{width:10%;border-width:1px;border-color:blue;border-style:solid;float:left;}
    div.col2{width:50%;border-width:1px;border-color:blue;border-style:solid;float:left;}
    div.col3{width:40%;border-width:1px;border-color:blue;border-style:solid;float:left;}
</style>
 <div class="col1">stuff</div>
  <div class="col2">stuff</div>
  <div class="col3">stuff</div>
  <div style="clear:both"></div>
   <div class="col1">stuff</div>
  <div class="col2">stuff<br>morestuff<br>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div>
  <div class="col3">stuff</div>
  <div style="clear:both"></div>
   <div class="col1">stuff</div>
  <div class="col2">stuff</div>
  <div class="col3">stuff</div>

Open in new window



is there a way to cut off long words (maybe hyphenate long word) because this is cutting into the next column
0
Comment
Question by:rgb192
2 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39186413
Add overflow:hidden; to the styles you want to limit the length.
0
 

Author Closing Comment

by:rgb192
ID: 39186430
thanks for the answer

now I do not like some of the results (hiding the ends of long words)
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28135332.html
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Unwanted gap in IE11 between header and menu 9 25
Host asp.net pages 5 34
is this a cms? 8 60
Zoom the page when you go in from your phone 3 53
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question