I've tried very hard to find a solution to this, but nothing seems to work. The words in the location elements do not break and change lines, i' ve tried everything, word-wrap:break-all |break-word and the current edition. Nothing seems to break the long lines to smaller ones. https://jsfiddle.net/k5VET/2431/
<html>
<head>
<title>Best Route</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
display: inline;
top:0;
right: 0;
bottom: 0;
left: 0;
overflow-x: scroll;
white-space: nowrap;
}
bigcontainer
{
vertical-align: top;
width: 99%;
margin-left: 0.5%;
margin-right: 0.5%;
background-color: #333333;
height: 100%;
display: inline-block;
float: top;
}
map
{
float: left;
height: 100%;
width: 75%;
background-color: green;
}
livelocations
{
float: right;
width: 25%;
height: 100%;
overflow: scroll;
}
livelocations h1
{
padding: 0;
margin: 0.5%;
text-align: center;
color: #edf0f5;
width: 100%;
}
div.location
{
background-color: #637bad;
width: 99%;
height: 10%;
margin: 0.5%;
color: #edf0f5;
margin-top: 1%;
border-radius: 4px;
}
div.location button
{
background: white url(https://cdn1.iconfinder.com/data/icons/linecons-3/17/close-128.png) center;
background-size: 100% 100%;
width: 20%;
height: 100%;
float: right;
margin: 0;
padding: 0;
border: 0;
border-radius: 0 3px 3px 0;
}
div.location p
{
display: block;
font-size: 75%;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
float: left;
width: 80%;
height: 100%;
background-color: red;
margin: 0;
padding: 0;
border-radius: 3px 0 0 3px;
}
</style>
</head>
<body>
<bigcontainer>
<map></map>
<livelocations>
<h1>Live locations</h1>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
<div class='location'>
<p>The support of CSS3 Hyphenation has started in Firefox 6 for the english languages.</p>
<button></button>
</div>
</livelocations>
</bigcontainer>
<bigcontainer>
<search><label for="autocomplete">Address</label><input placeholder="Enter address here..." id="autocomplete" type="text" size="35"></input></search>
</bigcontainer>
</body>
Your body has white-space: nowrap; which inherits all the way down to the p elements... add white-space: normal; to them and they will wrap...