I'm getting very frustrated with the head titles of some of my pages, I have word-wrap: break-all, and for some reason its breaking the word so im left with a letter on its own,
My css is as follows:
.spacing {
font-size: 22px !important;
letter-spacing: 0 !important;
line-height: 28px!important;
width: 80%;
margin: auto;
word-break: break-all;
word-wrap: break-word;
}
it's become infuriating I've tried word-wrap and word-break but none of them seem to be doing what I ask, any ideas why this is happening on the letters in the word rather than the word its self.
word-break: break-all; signifies that there can be a break between any two letters, even in the middle of a word. Try word-break: normal; (or perhaps even just removing word-break) and see if that fixes the issue.
Reference
Related
Is there an alternative for word-break: break-word that works in firefox ?
In firefox[Version 57.0]
In Chrome[Version 62.0.3202.94]
Is there a way or an alternative to use break-word attribute in firefox also.? [if it works in older versions it would be much better.]
Sample Code
table {
width: 300px;
display: inline-block;
overflow: hidden;
word-break: break-word;
}
.text-right {
width: 30%;
}
<table>
<tr>
<td class="text-right">Sample text </td>
<td>Sample texttexttexttexttexttexttexttext 000000000000000000000000000000</td>
</tr>
</table>
The valid values of word-break are as follows:
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;
The word-break CSS property specifies whether or not the browser
should insert line breaks wherever the text would otherwise overflow
its content box.
Chrome, Safari and other WebKit/Blink browsers also support the
unofficial break-word value which is treated like word-wrap: break-word.
So could you use word-wrap: break-word instead?
I'm a bit late to the party, but I think I found the answer.
I've always used word-break: break-word because it's perfect in most cases, if there is enough space it wraps and keeps the words, and if there's not enough space it breaks the word. MDN Web Docs say that word-break: break-word is deprecated but will probably still works, but the real reason I started looking at an alternative is that visual studio doesn't auto-complete break-word anymore :)
Solution ?
MDN - overflow-wrap
overflow-wrap: anywhere;
Wraps the words to new line, and only breaks the word if it need to.
"The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias."
So overflow-wrap should be used instead of word-wrap.
var s = document.querySelector('div');
function a(){
s.removeAttribute('class');
s.classList.add('a');
}
function b(){
s.removeAttribute('class');
s.classList.add('b');
}
#class{
border: 1px solid rgb(255, 120, 120);
width: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 2px;
}
btn{
border: 1px solid gray;
padding: 2px;
border-radius: 5px;
box-shadow: 0 0 2px gray;
cursor: pointer;
}
.a{
overflow-wrap: normal;
}
.b{
overflow-wrap: anywhere;
}
<span>overflow-wrap:</span>
<btn onClick="a()">Normal</btn>
<btn onClick="b()">Anywhere</btn>
<div id='class'>
We need a very long word like Supercalifragilisticexpialidocious
</div>
<i>There's also overflow-wrap: break-word;</i>
According to this thread on Bugzilla, word-break: break-word now works in Firefox as of version 67. It got implemented in this changeset.
break-word does come with this note in the MDN docs:
This deprecated API should no longer be used, but will probably still
work.
To manipulate words in your case you have two CSS properties: word-break and word-wrap:
word-break: https://www.w3schools.com/cssref/css3_pr_word-break.asp
word-wrap: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property. source here
It worked perfectly on my websites.
<div style="font-family: Arial, Helvetica, sans-serif;"><p class="article_content" style="margin-top: 2px;font-size: 15px;text-align: justify;color: #ffffff;margin-bottom: 2px;margin-left: 2px;width: 155px;white-space: pre-line;">Energy & Natural Resources(4)</p></div>
screen shot of output -
I want to avoid extra space between 'Energy' and '&' and 'Resources' and wrap words similar to this output.
I tried below css: white-space: pre-line;/* white-space: pre; *//* word-wrap: break-word; *//* word-break: break-word; */ ,but still i'm seeing same output
Remove this: text-align: justify
I wonder if its possible to control the typography when using wordpress? For example, if a word doesn't fit in the row, it gets hyphenated and doesn't jump to the other row.
The customer I am doing a website for wants the words that doesn't fit in the row to get hyphenated.
Update:
p { hyphens: auto; margin-bottom:24px; font-family:candara,arial,sans-serif; color: #000000; font-weight: 300; }
The hyphens: auto;, didnt work
It sounds like you may have tried something along these lines already, but CSS Tricks gives a more thorough explanation of how the hyphens property is language-dependent. Different languages have different default behaviors for hyphens. Also browser support for the hyphens property is a little spotty, with Chrome only supporting the "none" value.
I found a good answer to this question here:
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Let say I have this paragraph
iamaverylongwordthathasnospace yehey
when i use word-wrap:break-word; it became
iamaverylongwordthathas
nospace yehey
This is good..but when I tried
iama verylongwordthathasaspace yehey
It became
iamaverylongwordthathasaspaceyehey
My question is how to make the paragraph look like this
iama verylongwordthathasnospace yehey
It will wrap on spaces but force to break on long words?
You are looking for word-break: break-all;
Here is an example. I put the background as black, so you can see where it breaks: JS Fiddle
HTML
<div>iama verylongwordthathasaspace yehey</div>
CSS
div {
width: 120px;
word-break: break-all;
background: black;
color: white;
}
Source: CSS-Tricks: Word-break
I have seen many websites with code blocks on my cellphone, but only a few were responsive. If the code lines were to long I couldn't see the rest of the code. I am also now developing a website with code in. How can I make the code blocks responsive? Here is my code.
pre {
width: 70%;
font-family: 'Courier New', Courier, monospace;
background-color: #b3b3b3;
color: #ededed;
}
One solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.
pre {
white-space: pre-wrap; //css3
white-space: moz-pre-wrap; //firefox
white-space: -pre-wrap; //opera 4-6
white-space: -o-pre-wrap; //opera 7
word-wrap: break-word; //internet explorer
}
In 2018, the solution that worked for me is to use the white-space: property with a value of "pre-wrap" like below:
.markdown-body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
background: 0 0;
border: 0;
white-space: pre-wrap;
}
The value "pre-line" may work too if you are ok with the collapsing of multiple whitespaces.
The value "pre" doesn't work for me as it only breaks if there's a new line in the source (useless when there are very long litteral urls in source).
Here is how MDN describes the relevant values of the white-space: property:
pre :
Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap :
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
pre-line :
Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
the word-wrap CSS property has been mapped to word-break. Therefore, using the CSS attribute word-break: break-word; can also help resolve the issue
code {
word-break: break-word;
white-space: pre-wrap;
}
<html>
<head></head>
<body>
<p>
The HTML <code>button</code> tag defines a clickable button.
</p>
<p>The CSS property defines the background color of an element.</p>
<div>
<code>
gclid={gclid}&utm_id={campaignid}
&utm_source=google&utm_medium=cpc&utm_campaign={campaignid}&utm_term=
{adgroupid}&utm_content={creative}
</code>
</div>
</body>
</html>;
pre {
padding: 0.1em 0.5em 0.3em 0.7em;
border-left: 11px solid #ccc;
margin: 1.7em 0 1.7em 0.3em;
overflow: auto;
width: 93%;
font-family: "Courier New", Courier, monospace, sans-serif;
}
If you couldn't get the line numbers work with word-wrap:break-word, simply use Alex Gorbatchev's syntax highlighter like everyone else ;) No need to reinvent the wheel.