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.
Related
I'm struggling to make my website display correctly on both desktop and mobile devices.
The problem I'm facing right now is text flowing out of container (and out of mobile browser bounds). The text is composed by some website adresses.
I'm aware of word-break: break-all CSS property, but I noticed before changing its value that my default browser, Dolphin browser (Android device) already did this in a smarter way
I understand that this behaviour is likely to be related to the browser itself. I was wondering if there's a way to achieve the same result on all browsers, rather than using CSS word-break property that will result in something like this
EDIT:
The HTML code for one box is:
<div class="col-30 col-m-30">
<div class="shadow-box wow fadeInRight">
<p><img src="/_common/_images/_soundcloudicon/dark_128.png"/></p>
<h3>SoundCloud</h3>
<div style="height: 4px; width: 128px; background-color: rgb(15, 15, 30); margin: 4px auto;"></div>
<p>www.soundcloud.com/thelastminutemusic</p>
</div>
</div>
and this is the CSS class used (wow and fadeInRight are from an animation CSS file and col-30 set the width of the div to 50%):
.shadow-box
{
border-radius: 4px;
margin: 32px;
padding: 16px;
box-shadow: 1px 1px 8px rgba(15, 15, 30, 0.5);
}
You can use <wbr> tag to break the link in a specific location.
When a word is too long, or you are afraid that the browser will break
your lines at the wrong place, you can use the element to add
word break opportunities.
You should add it in the place you want your text will break:
<p>www.soundcloud.com/<wbr>thelastminutemusic</p>
What you want is this snippet of css:
.dont-break-out {
/* 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;
}
Shamelessly copied from CSS-Tricks : Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
I'm developing a website that includes flashcards for learning Chinese characters. The problem is that IE renders fonts slightly higher on the line than do other browsers I've tested. This isn't normally a big deal, but with a flashcard, the font is so big that the difference in placement becomes very noticeable.
I uploaded a dummy version of the webpage here: http://mandaclu.com/dummy/flashcard.html.
Open the link in both Firefox/Chrome and IE to see the difference (To see a really simple page with the same problem, use this link: http://mandaclu.com/dummy/test.html).
I've looked all over and haven't found any way to get that character to sit in the same place on the page regardless of the browser. Does anyone have any ideas? (CSS resets haven't worked either) Thanks for any help you can provide.
Looks like a difference in the way IE and other browsers render text with line-height > text-size.
Try setting line-height = text-size and add a top padding to force the text down instead.
eg.
#char {
display: inline-block;
font-size: 180px;
line-height: 180px;
margin: 0;
padding: 30px 0 0 0;
position: relative;
vertical-align: bottom;
width: 260px;
}
I'm break-wording a container so that extremely long words won't overflow. While Chrome and Safari deal with this really well, it seems that Firefox and IE like to break words randomly - even short words, at the most ridiculous points. See the screenshots below:
Here is the code I'm using to prevent break the words:
.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
This is the the CSS I'm using for the container and the text:
.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}
HTML
<div class="wrap break-word">
<div class="row-fluid quotation-marks">“”</div>
<span class="quote-text">
Having a partner definitely allows you to take more risks.
</span>
<span class="author">Arianna Huffington</span>
</div>
Why is this happening? Any clues on how I could get the words to break normally across all browsers? Firefox is definitely a priority.
Thanks in advance!
You're doubling up on CSS parameters. Try this..
.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
I did a temporary fix by changing my break-word code to:
.break-word {
word-break: break-word;
word-wrap: break-word;
}
The words are no longer breaking weirdly. I'm just not sure how safe this is in terms of cross-browser support (as I've only tested with the latest versions of Chrome, Firefox, and Safari)
Apparently hyphenation is only supported with en-US explicitly declared. If anybody has a more valid answer/explanation, I will gladly accept your answer.
Remove word-break: break-all. Its meaning is that it creates the exact problem you are describing: the browsers is instructed to break words into pieces at will.
Using word-wrap: break-all is more sensible (or less nonsensical), because it tells a browser to break a word only when there is no other way to make a line fit into the available width. But it, too, violates the rules of English and most other languages: it is incorrect to break a word at an arbitrary point. So take it away, too.
Hyphenation makes much more sense, but it has limited browser support, and for apparent reasons it requires the language of text to be declared (because hyphenation rules are strongly language-dependent). You can use JavaScript-based hyphenation such as Hyphenator.js to deal with browsers that don’t support CSS hyphenation
word-break:keep-all;
solved the problem for me
I want to use HTML input type="number" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keyboard is more interesting for the user than the normal one. This works nicely.
So, I have this piece of HTML here:
<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>
The important CSS elements applied here are:
input {
height: 2em;
padding: 0.2em 0.5em;
width: 100%;
/* avoid iPhone rounded corners */
border: 1px solid #afb7c1;
border-collapse: collapse;
border-radius: 0 0 0 0;
}
.input-number {
text-align: right;
}
Which should render like this:
The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:
All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".
Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?
Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:
input[type="number"]::-webkit-outer-spin-button { display: none; }
Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT
Live demo: http://jsbin.com/aviram/5/
Hope it help.
While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a <td> and styled with width: 100%...
A better solution (for my use-case) was found here:
Disable webkit's spin buttons on input type="number"?
It consists of these CSS styles:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Interesting addition: I've found the <input type="number"/> field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...
Not sure if this helps, but try to add these lines to the input css
-webkit-box-sizing: border-box;
box-sizing: border-box;
I don't have access to the older iOS devices to test it but this works on modern iOS and at the same time Google Chrome has started to disobey width: as well, so this fixes both:
input[type=number] {
max-inline-size: none; /* chrome 71 */
max-width: unset; min-width: unset; /* iOS12 */
}
background:url(images/page_text.png) repeat-y;
margin: 0 auto;
width: 949px;
padding: 20px;
line-height: 100%;
That was my css. What is wrong? When I write long sentence, it doesn't fit in the page_text.png box (It is funny, but only in IE, it works fine). I think I am missing something.
You need to set word-break... unfortunately, it's not consistent across browsers, so you use the code below to force it on all browsers. It's explained here
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+ */
It seems you are talking about a long word and not a long sentence. In that case you can use:
word-wrap: break-word;
Set overflow:hidden (CSS2) to hide the overflow on browsers that don't support the word-wrap:break-word (CSS3) to force a word break in the middle of a pathologically long word.
Edit: See the test case here, with an image: http://jsfiddle.net/8dP2m/4/
Edit 2: And here it is with the image in the background: http://jsfiddle.net/8dP2m/7/
When asking for HTML/CSS help, please provide:
Your actual code (you followed up with this in comments, though you should edit your question to include it). A pared-down test case showing the actual problem on JSFiddle is best.
What you hoped to see.
What you see instead (making it clear how this differs from #2).
On what OS/browser/version you are experiencing the trouble.