(Posting here because I couldn't find an answer and figured it out by experimentation, in case anyone else has this question.)
Note: Not exactly a duplicate of Single-line vs multi-line CSS formatting, because that was wondering if each property should be on its own line or if all properties for a given selector should be on the same line. I was wondering if there could be line breaks inside a property's value.
If you have a long value for a CSS property (for example, if you have a long list of fallback fonts for the font-family property), can you format that list nicely with linebreaks or will that break things?
For example, if you have
body {
font-family: fontA, fontB, fontC, fontD, fontE, fontF, fontG, ..., fontZ;
}
can you do
body {
font-family: fontA,
fontB,
fontC,
...,
fontZ;
}
?
It is recommended to use line breaks in CSS to make it easier to read and make changes later on. By using line breaks you won't experience any weird spaces in your visuals and it will not break your generated code. This is out of the ordinary compared to other coding languages like HTML.
The answer appears to be yes. Nothing errors out, nothing breaks.
Related
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.
Here is my original CSS to apply different colour backgrounds:
.one-colour {
background-color:#153a63;
}
.two-colour {
background-color:#f16c24;
}
.three-colour {
background-color:#337db9;
}
I know you can do multiple CSS classes such as .one.two.three {...}
But is my CSS condensed down as much as possible? and I don't mean just putting the code onto one line to make it "shorter".
But is my CSS condensed down as much as possible?
Yes(ish)
Each CSS rule is setting the same property style to a different value. As such, you have condensed the ruleset to the minimum number of rules to allow this level of distinction. If anything, you could simply change background-color to just background- if background properties aren't set in other rules which this could override.
*Although my predisposition is that this should be a comment, I guess in essence it is effectively an answer to your question.
Additional Methods Update:
As mentioned in the comments, there are some other (overkill?) methods for condensing:
Put everything in a single line, remove whitespace (minify)
Shorten your class names, e.g (.one-colour -> .c1), as noted below this is a subjective, context sensitive decision
The last style setting in a CSS rule does not require a trailing semi-colon in order for the rule to process, so you can also remove these
Convert your HEX colors to their 3 digit counterparts (approx), #036, #F63 and #36C
Depending on how you use these classes, there might be a way to remove one of those classes.
If you use those classes in a particular container - you could apply one of the colors to the container and then override it only on 2 of the inner divs.
Again, it depends on how you use the classes.
Yes, I would say so. If you wanted to start doing things to all the classes at once (like add a black border to them all) then you could combine that onto one line, as you suggested. Otherwise, it looks as compact as it's going to get at the moment. I can't suggest an improvement.
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!
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;
This is a typical Multiple Choice exam, Assume a question format:
<question qid='1'>
<stem>What is your name?</stem>
<choice value = 'a'>Arthur, King of the Britons</choice>
<choice value = 'b'>There are some who call me ... Tim!</choice>
<choice value = 'c'>He is brave Sir Robin, brave Sir Robin, who-- Shut up! Um, n-- n-- n-- nobody, really. I'm j-- j-- j-- ju-- just, um-- just passing through.</choice>
<choice value = 'd'>Sir Galahad... the Chaste.</choice>
<choice value = 'e'>Zoot... Just Zoot.</choice>
</question>
and I've got this all mapped to appropriate styles with radio buttons for the web.
Now, I need to make a printable version of the test. This is actually simpler, in that I don't need to include radios, just '___' for a check mark. The major issue is how to keep the question from splitting over the page break.
I haven't ever had luck with consistently preventing something like that. It may be a bit dirty, but if the questions are usually of the sameish length can you force a page-break after every X questions?
<style type="text/css">
.pageBreak{
page-break-before: always;
}
</style>
<question>...</question><br class="pageBreak" />
<question>...</question>
(Or apply that class to the question or whatever you want)
You can try using the page-break-inside property, but I haven't seen it be consistent as browser support for it is a mess right now:
question {
page-break-inside:avoid;
}
I'd suggest you look into page-break-after, page-break-inside and page-break-before rules in CSS.
Use a separate print stylesheet, and use the page-break-before and page-break-after selectors for your leading and ending questions on each page.
If the quiz is static, you can plot the classes you use out and make it work without anything more than CSS.
Use a table layout. But to avoid changing the semantics, use CSS.
question {
display: inline-table;
}