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
Related
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
In my webpage I have a div with fixed width and using the following css:
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.
For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."
I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.
Of course it's possible. (If you're willing to change your markup a bit.)
https://jsfiddle.net/warphLcr/
<style>
.foo {
/* Make it easy to see where the cutoff point is */
border: 2px solid #999;
padding-right: 18px; /* Always have room for an ellipsis */
width: 120px;
height: 1.1em; /* Only allow one line of text */
overflow: hidden; /* Hide all the text below that line */
background-color: #fff; /* Background color is required */
}
.foo > span {
display: inline-block; /* These have to be inline block to wrap correctly */
position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */
background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */
white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */
}
.foo > span:after {
position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
content: "…"; /* Each span has an ellipsis */
}
.foo > span:last-child:after {
content: ""; /* Except for the last one */
}
</style>
<div class="foo">
<!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible -->
<span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>
There's a jQuery plugin that does this, called dotdotdot.
It also works for multi-line text, and adapts responsively if the text reflows e.g. if the screen size changes. It also includes smart truncation of pathnames e.g. http://example.com/some/long/.../path.html
Be aware of the possibility of width-based timing issues in cases where the width changes or becomes unavailable in ways the plugin might not expect, such as if the text is initially hidden or if it changes font (e.g. loading web fonts on some browsers). Might require re-applying or being applied after such changes.
But 99% of the time, the plugin seems fast and robust.
If you want to display one line of text that would end in ellipsis, like a news ticker for example, just do:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
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.
I'm using Twitter bootstrap in my site and I'm having span which may contain long word and I need to break it. I use this Css but not working? what's problem?
.fidDivComment {
white-space: pre-wrap;
display: inline-block;
}
You need to add this to your CSS for that span
span {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
See this article for an explanation.
The questions stated this:
(using Twitter Bootstrap)
so the bootstrap fix is this: #include hyphens; this bootstrap out of the box mixin will add word-wrap: break-word;
this mixin is exist under this path:
/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss
If I have a very long string (without spaces!). Can I force the browser to line break it, for example, in a table's td via CSS. Width does not seem to have any effect.
Note: I know it is very unlikely for someone to submit a long string without spaces but you never know ...
I tried:
.gridrow td
{
padding: 1em;
text-align: center;
word-wrap: break-word;
}
and I use FF as my browser. word-wrap only seems to be used in CSS3?
I think what you mean is in CSS:
#id
{
max-width: 100px; /*or whatever*/
word-wrap: break-word;
}
Tested on your site with Firebug, it works.
Reference article.
Tables are a special case. They'll keep on expanding if they can, so as not to obscure any content; you can't use overflow: hidden on them either. Here are some options:
Use an optional breaking character. (Source: http://www.quirksmode.org/oddsandends/wbr.html ) If you can control insert a character like or <wbr> programatically into long strings, this may be a solution.
Perhaps preferably, depending on your situation, you can limit the table to use strict widths, at which point it should obey your rule:
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
i think there wordwrap element. search for the wordwrap.
word-wrap: break word
EDITED
REF Word-wrap in a html table
it suggest that there's no good way of doing this.