Solved

prevent a long word from going into the next div

Posted on 2013-05-21
2
254 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

713 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