I am trying to use CSS hyphens to hyphenate long words, such as in
this example
As you can see the last letter drops on the new line. This happens in Chrome, not for example in Safari. As my layout is using blocks of certain width and I would like to fit the words into blocks, the solution is not to change the font-size or block width, but rather to solve the hyphenate issue.
p {
width: 105px;
border: 1px solid black;
text-align: center;
}
p.hyphenate {
-ms-hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
<p class="hyphenate">ANONYMOUSLY</p>
<p class="hyphenate">EXEMPLARITY</p>
<p class="hyphenate">THAT EXEMPLARITY</p>
In the last paragraph "Y" drops on the new line without any hyphenation.
Here is the CodePen example. Works fine in Safari, does not work in Chrome:
https://codepen.io/jospo/pen/MWWjzLe
Thanks for any suggestions.
hyphens is only a Working Draft CSS property at present and currently is not fully implemented or supported by all browsers.
I suggest you review the support tables at CanIUse.com which has the following notes.
Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set the #lang attribute on the HTML element to enable hyphenation support and improve accessibility.
For Chrome: Only supported on Android & Mac platforms (and only the "auto" value) for now.
How to enable the select option text to go to the next line in firefox?
In chrome, the text goes to the next line for the option element but it does not go in firefox. I have tried a lot of css classes but does not work. I have provided the image and the code below. Really appreciate your help. Thanks in advance.
Below are the 2 images:
chrome (correct)
firefox (incorrect - want to fix this one)
Code:
<select class="detail-ta" id="detail-ta2" size="10">
<option style="text-overflow: clip; overflow: visible; white-space: -moz-pre-wrap; white-space: pre-wrap; margin-bottom: 1px;"></option>
</select>
For me it works using only CSS but it has a bug that the last word is covered by the scroll bar in Firefox.
You specify the width and also add display:inline-block
white-space: -moz-pre-wrap; /* Firefox */
white-space: pre-wrap; /* other browsers */
width:150px;
display:inline-block
I've created editable DIV here. Text is wrapping, just like I wanted. But, what I've noticed is that text is wrapping only if it is plain text. On the image below I've pasted some text with markup - and it doesn't wrap. Can I solve this, so text inside DIV will always wrap?
Code for editable DIV:
.editableDiv {
padding: 5px;
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
word-wrap: break-word;
box-sizing: border-box;
background-color: #FAC28A;
color: #003399;
}
Why don't you try using word-wrap: break-word; on .spanDateEventHeader class. This would make sure it doesn't leave the Div.
You are obviously using pre element.
Quick solution is to use white-space property on pre element.
Add this to your css:
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
How to mimic word-break: break-word; for IE9, IE11 and Firefox?
It seems to work in Chrome. I have learnt and understood that it is a is non-standard, webkit only.
FYI, I have tried using,
white-space: pre-wrap;
And some more like,
overflow-wrap: break-word;
Also tried the below mentioned CSS,
word-wrap: break-word;
word-break: break-word;
But these don't seem to work.
I can't provide fixed width to the span(which contains the text) by making it display: block; explicitly as the text is dynamic and will differ according to the user's Geo-location. Currently we support around 18 languages.
This is how the code looks,
The html,
<div id="grid2">
<span id="theSpan">Product Support</span>
</div>
The CSS,
#theSpan{
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera 7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
word-break: break-all;
}
#grid2{
width: 100px;
}
It looks like this,
I want it to be like,
Please note:
I had to use word-break: break-all; as for Some of the languages the translated text is too long and it overflows out of the grid. The text 'Product Support' is dynamic.
Update:
I have a fixed width for the div with id, grid2. In one of the languages the translated text is too long, it's a Single word and it flows out of the grid2 div.
Updated the code too.
I have had good success in Chrome, Firefox and IE with using only:
word-break: break-word;
word-wrap: break-word;
In my problem case I was already using:
display: table-cell;
and I ended up having to include
max-width: 440px;
to get wrapping in all browsers. In most cases the max-width was not necessary.
#grid2{
white-space: pre-wrap;
word-wrap: break-word;
}
This should work for IE11, but not for IE9
Use display:table-caption to achieve what you are looking for.
LIVE DEMO
The HTML:
<div id="grid2">
<span id="theSpan">Product Support</span>
</div>
The CSS:
#theSpan{
display:table-caption;
}
Hope this helps.
pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how do I make the text word-wrap instead of printing out one long line?
The answer, from this page in CSS:
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
This works great to wrap text and maintain white-space within the pre-tag:
pre {
white-space: pre-wrap;
}
I've found that skipping the pre tag and using white-space: pre-wrap on a div is a better solution.
<div style="white-space: pre-wrap;">content</div>
Most succinctly, this forces content to wrap inside of a pre tag without breaking words.
pre {
white-space: pre-wrap;
word-break: keep-all
}
I combined #richelectron and #user1433454 answers.
It works very well and preserves the text formatting.
<pre style="white-space: pre-wrap; word-break: keep-all;">
</pre>
This is what I needed. It kept words from breaking but allowed for dynamic width in the pre area.
word-break: keep-all;
I suggest forget the pre and just put it in a textarea.
Your indenting will remain and your code wont get word-wrapped in the middle of a path or something.
Easier to select text range in a text area too if you want to copy to clipboard.
The following is a php excerpt so if your not in php then the way you pack the html special chars will vary.
<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
For info on how to copy text to the clipboard in js see: How do I copy to the clipboard in JavaScript? .
However...
I just inspected the stackoverflow code blocks and they wrap in a <code> tag wrapped in <pre> tag with css ...
code {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
width: auto;
}
Also the content of the stackoverflow code blocks is syntax highlighted using (I think) http://code.google.com/p/google-code-prettify/ .
Its a nice setup but Im just going with textareas for now.
You can either:
pre { white-space: normal; }
to maintain the monospace font but add word-wrap, or:
pre { overflow: auto; }
which will allow a fixed size with horizontal scrolling for long lines.
Use white-space: pre-wrap and vendor prefixes for automatic line breaking inside pres.
Do not use word-wrap: break-word because this just, of course, breaks a word in half which is probably something you do not want.
Try using
<pre style="white-space:normal;">.
Or better throw CSS.
This is what you need to wrap text inside pre tag:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
The <pre>-Element stands for "pre-formatted-text" and is intended to keep the formatting of the text (or whatever) between its tags. Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the <pre>-Tag
Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
source: w3schools.com, emphasises made by myself.
The Best Cross Browser Way worked for me to get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)
CSS:
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML:
<xmp> your text or code </xmp>
The following helped me:
pre {
white-space: normal;
word-wrap: break-word;
}
Thanks
in case your using prism or any code formatting library, then you will need to modify booth pre and code tags as follow:
pre {
overflow-x: auto !important;
white-space: pre-wrap !important; /* Since CSS 2.1 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
word-wrap: break-word !important; /* Internet Explorer 5.5+ */
}
code{
white-space: normal !important;
}
<pre> does it's work, but for code there is <code> tag.