This question already has answers here:
How to force a line break in a long word in a DIV?
(18 answers)
Break long word with CSS
(6 answers)
What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS?
(13 answers)
Closed 4 years ago.
I have a div which is the width of the page. I want a very long word in this div to break and wrap, so all the content is displayed on the screen and doesn't overflow/ width is never greater than 100%.
I've tried overflow-wrap: break-word; but this doesn't seem to do the trick.
Thanks.
.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }
h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;}
<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
you're looking for the word-break property.
additionally, if you want to control where the word's break in html, look up the <wbr> tag.
.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }
h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
word-break:break-all;}
<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
You can add word-break: break-all; but it will push the content to the left?
.container {
max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;
}
h1 {
text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-all;
}
<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
.container {
width: 300px;
background-color: red;
overflow-wrap: break-word;
word-wrap: break-word;
}
This should achieve the effect that you're looking for :)
Credit
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
JSFiddle
.css
.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }
h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;}
.breakword {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.html
<div class="container breakword">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
You have to add the hyphens to auto if you want to do it by the browser.
if you want to do it manually
see my update:
.container {
max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;
border: 1px solid grey;
}
h1 { word-wrap: break-word;
/*you can split the words by the width of h1*/
width:250px;
}
<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
According to the Mozilla developer reference:
The overflow-wrap CSS property specifies whether or not the browser
should insert line breaks within words to prevent text from
overflowing its content box.
Use overflow-wrap and set the value of the property to "break-word"
Related
With the following markup, is it possible (and how) to achieve a wrapping like shown in the preview?
Markup
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
CSS
.filled-box {
width: 80px;
height: 80px;
position: absolute;
overflow: hidden;
}
.filled-box h2,
.filled-box p {
display: inline;
overflow-wrap: break-word;
font-size: 20px;
margin: 0;
padding: 0;
}
Preview
Hi there I am
just a text w
ith some word
s, that want
to fill the e
ntire space
If there is a solution it of course may use CSS3 Syntax.
word-break: break-all; is what you are looking for probably. Devil is in the details.
Your initial markup has an h2 tag with a p tag and but your preview shows that they are all inline. h2and p tags are not inline elements.
And thus, making them display: inline is not the ideal thing to do, instead use inline elements, like span and others.
Another thing to notice here is that word-break: break-all; doesn't works properly on your inline elements. Just use the tags what they were made for and tweak the values according to our prefs.
.filled-box {
width: 85px;
position: absolute;
}
.filled-box p span{
word-break: break-all;
font-size: 16px;
margin: 0;
padding: 0;
}
.filled-box p {
word-break: break-all;
font-size: 16px;
margin: 0;
padding: 0;
}
<div class="filled-box">
<p><span>Hi there</span> I am just a text with some words, that want to fill the entire space</p>
</div>
You can use word break property of css. Simply add
word-break: break-all;
It will automatically fill up the entire width and wrap the overflown text.
Also, replace the h2 tag as it is a block element
make the h2 float and inherit font-size :
.filled-box {
width: 85px;
position: absolute;
word-break: break-all;
font-size: 16px;/* or whatever */
margin: 0;
padding: 0;
}
.filled-box * {
margin: 0;/*reset*/
}
.filled-box h2 {
float: left;
font-size: inherit;
padding-right: 0.2em;
font-weight: normal; /*whatever*/
color:rgb(51, 170, 255) /* whatever*/
}
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
or use display:contents, but not supported everywhere unfortunatelly here:
.filled-box {
width: 85px;
position: absolute;
word-break: break-all;
font-size: 16px;/* or whatever */
margin: 0;
padding: 0;
}
.filled-box * {
display:contents;
}
.filled-box h2 {
font-size: inherit;
padding-right: 0.2em;
font-weight: normal; /*whatever*/
color:rgb(51, 170, 255) /* whatever*/
}
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
The display value to used should be run-in supported once in Chrome :
.filled-box {
width: 85px;
position: absolute;
word-break: break-all;
font-size: 16px;
/* or whatever */
margin: 0;
padding: 0;
}
.filled-box * {
margin: 0/* reset*/
}
.filled-box h2 {
display: run-in;
font-size: inherit;
padding-right: 0.2em;
font-weight: normal;
/*whatever*/
color: rgb(51, 170, 255)/* whatever*/
}
<div class="filled-box">
<h2>Hi there</h2>
<p>I am just a text with some words, that want to fill the entire space</p>
</div>
But it just doesn't work for many reason, see: https://css-tricks.com/run-in/
I have a box with text-align: center, with a max-width: 420px. Inside the box there is a h1 with a very long word. (See the code example)
The Problem: The overflowing word is now left aligned. I know, there is word-wrap for this, but I dont want to cut the text, it has to be on the same line. The width of the box is also fixed and can not be more.
My question: Is it possible to center align the big overflowing word?
.titles {
text-align: center;
padding: 3rem 0;
margin: 0 auto;
max-width: 420px;
background: lightgrey;
}
h1 {
font-size: 2.9rem;
margin: 0 0 1.9rem;
color: #3d78c7;
font-weight: 700;
line-height: 1.2;
}
<div class="titles">
<h1>Allgemeine Geschäftsbedingungen</h1>
</div>
I will answer this for now, but I think it may be a duplicate. If one is found, I will delete the answer.
You can do this by making the <h1> element a flex item and using justify-content: center; on it.
.titles {
text-align: center;
padding: 3rem 0;
margin: 0 auto;
max-width: 420px;
background: lightgrey;
}
h1 {
font-size: 2.9rem;
margin: 0 0 1.9rem;
color: #3d78c7;
font-weight: 700;
line-height: 1.2;
display: flex;
justify-content: center;
}
<div class="titles">
<h1>Allgemeine Geschäftsbedingungen</h1>
</div>
The easiest way to do this is to add negative left and right margin to your title. Its not ideal, because it can mess up your other content and also might not work with really long words:
.titles {
text-align: center;
padding: 3rem 0;
margin: 0 auto;
max-width: 420px;
background: lightgrey;
}
h1 {
font-size: 2.9rem;
margin: 0 -10% 1.9rem;
color: #3d78c7;
font-weight: 700;
line-height: 1.2;
background: rgba(0,0,0,0.2)
}
<div class="titles">
<h1>Allgemeine Geschäftsbedingungen</h1>
</div>
Another solution is to hyphenate the words inside the container. Browser support is pretty great: https://caniuse.com/#feat=css-hyphens
.titles {
text-align: center;
padding: 3rem 0;
margin: 0 auto;
max-width: 420px;
background: lightgrey;
}
h1 {
font-size: 2.9rem;
margin: 0 0 1.9rem;
color: #3d78c7;
font-weight: 700;
line-height: 1.2;
background: rgba(0,0,0,0.2);
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
<div class="titles">
<h1 lang="de">Allgemeine Geschäftsbedingungen</h1>
</div>
I'm playing around with html and css and have a question about the text-align functions.
I'm trying to build my own website and want the text-align set to start, but centred in the middle of the page. I've got it so that the content is centred, but when only text-align is set to centre. Is there a way to obtain centred text content but with text-align set to start? I don't particularly want to use padding (if it can be helped), as i've used it within this context and have had some responsive problems (which have had to be rectified with many media screen commands).
Sorry for the pretty noobie question.
HTML
.Container1 {
height: 100%;
width: 100%;
background: #e8eaed;
background-size: cover;
display: table;
margin: auto;
display: table;
top: 0;
}
.About {
font-family: 'Lato';
font-weight: 300;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
max-width: none;
}
.Content2 {
margin: 0 auto;
text-align: center;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
text-align: center;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
This is how i want the text to be aligned, but to be centred in the middle of the page...
Try to use Flexbox. Use align-item:center to center flex item vertically.
Stack Snippet
.Container1 {
height: 400px;
background: #e8eaed;
display: flex;
align-items: center;
}
.About {
font-family: 'Lato';
font-weight: 300;
}
.About h2 {
font-size: 40px;
letter-spacing: 4px;
line-height: 10px;
font-style: italic;
color: #70a1af;
text-shadow: 2px 2px white;
}
.About p {
font-size: 18px;
letter-spacing: 4px;
line-height: 20px;
color: #70a1af;
}
<section class="Container1">
<div class="About">
<div class="Content2">
<h2> ABOUT ME.</h2>
<p> Computer Science // British Born // Wannabe Australian </p>
</div>
</div>
</section>
fixed the width and then set margin: 0 auto
I'm trying to achieve the following using CSS on my <h1> element (since apparently it is not default browser behaviour):
However, I can't seem to keep my browser from rendering it as following:
Does anybody have an idea how to achieve this properly?
Current code:
.title {
width: 300px;
float: left;
line-height: 68px;
display: inline-block;
}
.title h1 {
font-size: 42px;
line-height: 58px;
color: #FFF;
background: #000;
white-space: normal;
word-wrap: break-word;
display: inline-block;
vertical-align: bottom;
}
<div class="title">
<h1>This is a title on two lines</h1>
</div>
display: inline instead of inline-block
.title {
width: 300px;
float: left;
line-height: 68px;
display: inline-block;
}
.title h1 {
font-size: 42px;
line-height: 58px;
color: #FFF;
background: #000;
white-space: normal;
word-wrap: break-word;
display: inline;
vertical-align: bottom;
}
<div class="title">
<h1>This is a title on two lines</h1>
</div>
I have the the following scenario where i need to push the entire word to the new line if it exceeds the width of the box. i have used CSS3 word-wrap property to achieve this. but it breaks the word as shown below.
I would like not to break a word and push the entire word to the next line if the text is more.
HTML
<div class="container">
<div class="img-container">
<img class="img-icon" src="/icons/image1.png">
</div>
<p class="icon-footer">Performance Validator</p>
</div>
CSS
.container {
position: absolute;
align-items: flex-start;
text-align: center;
box-sizing: border-box;
outline: 0;
display: flex;
flex-direction: column;
}
.container img-container {
display: flex;
}
.container .img-container .img-icon {
border:1px solid #000;
height: 64px;
width: 64px;
outline: 0;
}
.icon-footer {
margin: 0;
width: 64px;
color: #000;
font-size: 13px;
white-space: normal;
line-height: 1.5;
word-wrap: break-word;
}
As stated on this question, you could remove the word-wrap itself
.icon-footer {
margin: 0;
width: 64px;
color: #000;
font-size: 13px;
white-space: normal;
line-height: 1.5;
}
You can achieve it without using word-wrap: break-word property. By default the word will overflow out of the parent container which is the default property.
word-wrap: break-word property breaks the word to next line when it doesn't find ample amount of space.