Разрыв слова для элементов относительного размера
Я очень старался найти решение для этого, но ничего не получается. Слова в элементах местоположения не ломаются и не меняют строки, я пробовал все, перенос слов: ломать все | ломать слово и текущее издание. Ничто, кажется, не разбивает длинные очереди на меньшие. 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>
1 ответ
Решение
Ваш body имеет white-space: nowrap; который наследует вплоть до p элементы... добавить white-space: normal; им и они завернут...