- : ? . , , .
word-wrap
HTML <br>. . , , , :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="logo-wrapper">
<p class="logo"><br><br><br><br><br><br></p>
</section>
</body>
</html>
, . , , , 550 ? . CSS . , .
, , — word-wrap. : normal, break-all keep-all. break-all. Normal , . Keep-all CSS . , . , - , . Safari iOS.
CSS , :
p{
font: bold 30px Helvetica, sans-serif;
width: 25px;
word-wrap: break-all;
}
, . Word-wrap break-all , . . , .
white-space
- — Enter, , . "", . , , .
CSS , white-space, , "". White-space pre-line Enter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
#wrapper{
width: 60%;
background: linear-gradient(to bottom, rgba(0,0,0,.1),rgba(0,0,0,.8));
}
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
white-space: pre-line;
}
</style>
</head>
<body>
<section id="wrapper">
<p class="text-to-wrap">
"".
</p>
</section>
</body>
</html>
pre-line pre-wrap CSS, . , , white-space nowrap:
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
white-space: nowrap;
}
Text-overflow
— text-overflow. , CSS- , . :
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
, overflow hidden.