I am building a website where I am displaying korean text. The client (US local) is being very unhappy because the text is breaking in the middle of words. As example of this, here is an image: Red background text being one word.
I have tried to use
word-break: keep-all;
but it isn't supported in Chrome/Safari.
What am I able to do? I have searched the web for hours and got nothing. Is this something that is expected in cjk sites or is there a solution that I haven't found.
It is a responsive site, so I can't put in hard breaks, or fake it.
demo: http://codepen.io/cibgraphics/pen/tqzfG
Why not use jquery plugin - https://github.com/mytory/jquery-word-break-keep-all
This plugin is for it. IE has CSS property word-break: keep-all; but other browser has not.
The SPACE character generally allows a line break. This is not affected by the word-break property. To disallow a line break, use NO-BREAK SPACE instead of SPACE, e.g. 십 니까. Alternatively, wrap a sequence of characters that should not be broken in a span element and set white-space: nowrap on it.
Use the CSS rule word-break: keep-all. It's now supported in all browsers but Microsoft Edge (a change since 2014 when the accepted answer above was posted).
You can try a mixed solution in which you use CSS and JS in order to simulate words and then move them to a new line if the width is not enough.
The test I did uses a CSS class with display inline-block and then wraps each Korean word into spans.
CSS
.korean-word {
display: inline-block;
}
The use a JS/jQuery code like this:
var p = $(".hero__description");
var text = p.text();
var nospace = /(\S+)/g;
var p1 = text.replace(nospace, "<span class='korean-word'>$1</span>");
p.html(p1);
The code simply takes in a text, looks at things which are NOT spaces and then puts those things into span HTML elements. This way you force a word to go to new line.
Add both line-break:strict and word-break:keep-all into your CSS. This helps solve the problem for me.
Related
I need help with a bit of CSS I'm trying to use. I'm testing with Chrome, but I need a solution that's not browser-specific.
I have a page divided into two iframes: a narrow one on the left that contains a table of contents, and a wide one on the right that displays a selected page. I want to display the URL of the selected page at the bottom of the left-hand frame. If it's too long to fit in the frame (as it usually is), it should wrap to a second line, and the first line should move up so that the last line remains bottom-aligned.
The structure of the page in the table of contents iframe looks like this:
<body>
<div>
<script...> <!--JavaScript that generates the table of contents--> </script>
</div>
<div id='showPageUrl' style="height:auto;position:absolute;bottom:0"></div>
<script...> showURL(document.URL) </script>
</body>
The following function is executed by the JavaScript code that loads pages (from an onclick event), and also by HTML that loads the initial page (above).
function showUrl(url) {
var sel = document.getElementById('showPageUrl');
if (sel!==null) {
sel.innerHTML = url;
}
}
The problem: if the URL is too long to fit on one line it doesn't wrap, because it contains no whitespace characters to wrap at. Instead the frame sprouts a horizontal scroll bar. If I replace the URL with a piece of text that contains whitespace, the text breaks at a whitespace character and displays properly.
I've looked for a CSS property to make the URL break wherever it has to, but I can't find anything. All the line break controls seem to assume there's whitespace and change how the rendering engine treats it.
What must I do to make a URL (with no whitespace) break properly at the end of a line?
You're looking for the overflow-wrap CSS property (legacy word-wrap):
.example {
word-wrap: break-word;
overflow-wrap: break-word;
}
Documentation: http://www.w3.org/TR/css3-text/#overflow-wrap
Browser support: http://caniuse.com/#search=overflow-wrap
DEMO: http://jsfiddle.net/aueL3/2/
#showPageUrl { word-break: break-all; }
For reference: http://www.w3schools.com/cssref/css3_pr_word-break.asp
This is not really a CSS issue. To specify allowed direct break points, you can use the <wbr> tag or the zero-width space character . You need to decide on the principles of breaking; there are various standards and practices on where a URL can be broken.
Primarily, don’t put URLs into textual content. They should appear in attributes, like href.
You can use this CSS to break the URL anywhere that is going to exceed the parent's width.
Here is the CSS:
.text {
position: absolute;
display: block;
width: 100%;
bottom: 0;
white-space: pre-wrap; /* CSS3 */
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+ */
}
white-space and word-wrap code taken from How do I wrap text with no whitespace inside a <td>?
Finally, a JSFiddle: Demo
Related Question: SO Question
zero-width space character is perfect for text, but urls are likely to be copied, and when pasted the space will be right there to break them. Since it is invisible, people won't understand what's wrong and will think the url is not working. Since support for wbr is not universal, for a similar issue I split the url in two spans marked with display:inline-block. They split just like an invisible space and don't mess copy & paste (is important to avoid spaces or newlines between them in the html or a space will be visible).
<span style="display:inline-block">firstpartoflongurl</span><span style="display:inline-block">seconfpartofit</span>
*I know this is too old to be useful to the original author, but may help others looking for the same thing
Try to use the following line to insert new line by replacing white spaces using css.
white-space: "pre-line"
Forcing the text split into multiple lines when it reaches the maximum width of the #div.
How can I do this? because, if I try to output data with 200 characters without spacing, I get the following:
Result 1 (no spacing):
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
Result 2 (have one space):
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (space)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
Expected result:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
Do I need to use the following?
result+=str.substring(0,200) "\n";
or it is a CSS styling?
Applying word-break: break-all; will make the text wrap at whatever character whenever it exceeds it's parent's width, without the need of a space or other type breakpoint.
As already stated in the accepted answer use the following:
word-break:break-all;
The W3 specification that talks about these seem to suggest that
word-break: break-all is for requiring a particular behaviour with CJK
(Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is
the more general, non-CJK-aware, behaviour.
(credit: AakashM: see post)
Word-Break Property options (W3Schools):
normal Default value. Break words according to their usual rules
break-all Lines may break between any two letters
keep-all Breaks are prohibited between pairs of letters
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about
Working Example:
Word-Break W3Schools
make a smaller div and use CSS text-align: justify and word-break:break-all;
Is this what you want?
use div and set the width of a div
In CSS File
.respose container:{
width:200
}
And then in the html file add
<p div="response container">
if(string.length>limit)
{`return string.substring(0,limit)+'...';`
}
else
{`return string;`
}
</p>
The word-break property can be used to control the text flow. The following value would fix your issue:
word-break: break-all
More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
The updated answer should be:
overflow-wrap:break-word;
It will break a word that by itself would not be able to fit on its own line, but leave all other words as they are (see overflow-wrap here).
You could also use:
overflow-wrap:anywhere; but this will allow line breaks after any word in an effort to reduce the width of an element. See the difference described below from MDN:
[break-word is] The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
Also, anywhere is not supported by Internet Explore, Safari, and some mobile browsers while break-word is supported on all major browsers (see [here][2]).
word-break: break-word; should no longer be used because it is deprecated in favor of the overflow-wrap:break-word;. Now, the word-break property is intended to be used when you want to break words regardless of whether they could fit on their own line (i.e. the OP's first example with word-break: break-all.
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
(From overflow-wrap also linked above )
I'm having trouble with the text underneath the images on the website I'm building:
1) The "Back to home page" changes from the font it's set at (Georgia, 0.9em) to the default in Firefox. It does not do this in Safari (http://ink-12.web5test.terc.edu/img/modelofinteractionfull.cfm).
2) The footer appeared fine before I added images (http://ink-12.web5test.terc.edu/index.cfm). After I added images (inside div class=.submenu), again, the font I set (Georgia, 0.9em) changed to the default in Firefox (http://ink-12.web5test.terc.edu/aboutus/index.cfm).
Another issue that appear after I inserted the images:
1) The footer's vertical bars (|) disappeared between the links, in both Firefox and Safari. You can see that the bars are actually still there when you highlight the text, but for some reason, they do not appear in white anymore so they aren't visible (http://ink-12.web5test.terc.edu/aboutus/index.cfm). But you can see how it's supposed to look on the home page (http://ink-12.web5test.terc.edu/index.cfm).
I wanted to copy my code below, but I'm having trouble understanding how to properly format it on this site, so I'll work on that. In the meantime, any thoughts?? Thanks so much in advance for your help!
For example, regarding question 1, the only CSS rule that sets the font family is
h1,h2,p,p2,li{ /*group codes for many styles*/
font-family:"georgia";
}
It does not affect the link, since it is not inside any of those elements. Similar considerations apply to question 2. And the vertical bars are there, they are just black on black.
Use a markup validator like http://validator.w3.org to find he HTML syntax errors, fix them, and then deal with the CSS syntax errors with http://jigsaw.w3.org/css-validator/ and then analyze the logical problems. Using Firefox with Firebug is a good idea, since then you can click on any element and see which, if any, CSS rules are being applied to it.
I'm not sure if this will help you, but I suggest making sure that "Georgia" is capitalized when you declare it. I might be wrong but suspect that some browsers may not be picking up the name because it doesn't match the font's name perfectly.
Comparing the pipes (the vertical bar characters '|') between your examples shows a small flaw in the CSS. The pipes are not inside of the <a> tags so even if you set all your <a>s to white the pipes will never change. In one example ( http://ink-12.web5test.terc.edu/index.cfm ) the pipes are contained by a <p2> tag, which wasn't a valid HTML tag last I checked but that's besides the point. The <p2> has its color set to white which makes the pipes inside of it white. In the other example ( http://ink-12.web5test.terc.edu/aboutus/index.cfm ) the pipes are contained by a <div> which has its color set to black which makes the pipes black, but the <a>s are set to white. Since your background is also black the pipes disappear.
For the "|" issue add the following
skeleton.css line #161
.footerlinks {
padding-top: 0.5em;
color: #fff;
}
For the link issue it looks to me that the font is becoming bold when you hover. You just need to define your hover state ...
fonts.css line #4
a:hover {
font-weight: normal;
}
Sorry, it was such a simple fix! I"m very new to coding (as I'm sure you could tell by the ridiculous amount of markup I had in my style sheets). I didn't know that links could have all their own font-family, and thought that if you kept it between a heading or paragraph tag, that it would just take that on. But I get it now, thank you!
I'm trying to style a word with a big first letter and spacing for the other letters. My current solution is pretty ugly: see here (and a malfunctioning jsfiddle here).
Ideally, instead of something ugly like this: <dropcap>T</dropcap><span style="letter-spacing:.2em;">HERE</span><span style="margin-left:-.2em;"> is</span> nothing more unreasonable...
I could have something sensible like this: <dropcap>THERE</dropcap> is nothing more unreasonable...
Any ideas? Thanks.
You could just use the :first-letter pseudo-element.
The :first-letter pseudo-element is
mainly used for creating common
typographical effects like drop caps.
This pseudo-element represents the
first character of the first formatted
line of text in a block-level element,
an inline block, a table caption, a
table cell, or a list item.
It's supported in IE8+ and all modern browsers.
For example: http://jsfiddle.net/HTnBP/4/
For the other half of your question, try:
T<span>HERE</span>
div > span:first-child {
letter-spacing: .2em;
margin-right: -.2em
}
http://jsfiddle.net/HTnBP/5/
I don't really see the point in using a custom dropcap element. Unless you don't mind adding extra complexity to support IE8 and lower, or you simply don't care about those browsers.
Or maybe you can use this JS solution i found
http://webplatform.adobe.com/dropcap.js/
Is it possible to text indent each line in a textarea? I'm using a handwritten font and the first letter on each line is getting cut off slightly. I've already used padding and margin, but this does not work.
Many thanks.
Erik
Don't know about \t but
style="padding-left: 4px;"
would definitely work for all the rows of a text-area.
Have you tried using \t? More details would be good are you programming this or are you typing it? You can also try alt codes if its the latter - Alt-012 is tab.
Edit I see your probably talking about the HTML input textarea. You might tag your question for HTML, though looking at it again it's fairly straight forward from the context.
in Chrome 69.0.3497.92, This gives indent only for the first line in textarea:
text-indent: 2em;