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.
Related
I have following in html:
.horizontal-div {
display: flex;
flex-direction: row;
}
.style-1 {
width: 140px;
height: 19px;
font-size: 16px;
color: #272d37;
margin-top: 19px;
margin-left: 8px;
}
.style-2 {
width: 16px;
height: 16px;
float: right;
margin-left: 295px;
cursor: pointer;
}
<div class="horizontal-div">
<div class="style-1">Dummy QC</div>
<div class="style-2">Some image</div>
</div>
What I observe is that 'Dummy QC' goes to next line, as:
What can be the solution to avoid it from going to next line?
You can use CSS white-space Property
.horizontal-div {
display: flex;
flex-direction: row;
white-space: nowrap;
}
.style-1 {
font-size: 16px;
color: #272d37;
margin-top: 19px;
margin-left: 8px;
flex-wrap: nowrap;
}
flex-wrap will work. The problem occurs only when resizing the page to go below your declared width. get rid of the width, or use a media query for small screen/size rules. tested and this works. will force the text to stay on one line.
Set overflow property to div you would, also select value that fits you most out of those:
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow: auto;
}
div.ex4 {
overflow: visible;
}
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/
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"
I currently have a div that looks like the following when a normal paragraph with spaces is inputted. The letters “A”, “B” and “C” denote icons that I currently have in the div:
The picture above demonstrates the correct behavior in the case where the paragraph has spaces, since icon "C" is still inside of the div and there is space between icon "C" and the text.
However, problems occur when I attempt to put in a long string without spaces inside of the span with class “text”. The long string wraps, but still pushes out icon “C” from the right side of the div and places its text over it:
These are the CSS attributes for the div with the class “text” in which the long text with no spaces is located:
.text {
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
I am aware of the css attribute word-break: break-word, but unfortunately that attribute will not work in firefox if a parent div is using display:flex. See this issue for more details:
https://bugzilla.mozilla.org/show_bug.cgi?id=1136818
How do I do the following?:
Make the long word wrap without pushing icon "C" out of the div?
Do #1 without using the word-break: break-word property which has a bug in firefox?
Here is a Plunker for your convenience
.goal {
background-color: white;
border-color: #23b389;
border-style: solid;
border-width: 1px 1px 1px 20px;
min-height: 60px;
margin: 20px 0 0 20px;
display: flex;
justify-content: space-between;
}
.clickable {
cursor: pointer;
}
.item-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
}
.item-container .collapse-expander {
margin-left: -20px;
color: white;
font-size: 20px;
cursor: pointer;
}
.item-container > :not(.collapse-expander) {
margin: 1px 20px;
max-width: 100%;
}
.item-container > :not(.collapse-expander):not(:last-child) {
margin-right: 0;
}
.text {
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
.standard-icon {
color: #1aa8de;
font-size: 22px;
cursor: pointer;
}
.menu-icon {
color: #1aa8de;
font-size: 22px;
cursor: pointer;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<br>
<br>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable">
<span class="text">
ThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongwordThisisareallylongword
</span>
</div>
</div>
<div class="item-container">
<div class="menu-icon">
C
</div>
</div>
</div>
</body>
</html>
Instead of using word-wrap: break-word; use word-break: break-word;
Like this
.text {
font-weight: normal;
white-space: pre-wrap;
word-break: break-word;
}
And word-break: break-all; seems to work on most of the firefox versions. So try using break-all instead of break-word.
This should work on most of the firefox verisons
.text{
word-break: break-all;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
}
I have a basic block(purple) that has some text inside it of variable length. The div is position relative and is also responsive so its width etc is in %.
Some of our users on Chrome latest (v43.0.2357.65) and WinXP see the text overflows to the edge of the purple box. This happens on a whim so its hard to reproduce. I am trying to fix the CSS so that text does not overflow. I have a max-width and break-word property too on the div that contains the text.
The site is in dutch.
<div class="mt-landing__section-notification">
<div class="mt-landing__section-notification__info-icon icon-info"></div>
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">
This is where the text is.
</div>
</div>
</div>
And here is the CSS on the outermost div and the one containing the text :
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
background-color: #411E4E;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.mt-landing__section-notification__content {
margin: 0px 50px;
}
.mt-landing__section-notification__info-icon {
width: 50px;
float: left;
font-size: 24px;
}
.info-icon {
font-family: mt-icons;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.info-icon::before {
content: '\e617';
}
Any ideas why text is overflowing ?
It looks like your info-icon might be the culprit here.
either
a) Set the icon to position:absolute and the container to position:relative, which will take the icon out of the flow, so it won't push the text to the right,
or
b)
maybe use the icon as a background-image. Simply increase the padding-left of the container and add it as a background-image. I find this to be the easiest way to keep things in order, whilst still flexible and responsive:
https://jsfiddle.net/svArtist/s3xc3nro/
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
padding: 20px;
color: #fff;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 0px;
display: block;
}
.mt-landing__section-notification__message {
line-height: 24px;
margin-top: -3px;
word-wrap: break-word;
max-width: 100%;
}
.icon-info{
background: url(http://www.grafik-wunder.de/klafo/images/info.png) #411E4E no-repeat 10px center;
padding-left: 50px;
min-height: 50px;
box-sizing:border-box;
}
<div class="mt-landing__section-notification icon-info">
<div class="mt-landing__section-notification__close-icon"></div>
<div class="mt-landing__section-notification__content">
<div class="mt-landing__section-notification__message">This is where the text is.</div>
</div>
</div>