I just got another assignment for web design. And I was curios how to space text like this.
The issue here is not the heading nor the text on the left. I have problem with the time on the right. We are forbidden to edit html which looks like this:
<div class="oteviracka">
<h2>Otevírací doba</h2>
<p><strong>Po – Pá:</strong> 11:00 – 23:00</p>
<p><strong>So:</strong> 11:00 – 24:00</p>
<p><strong>So:</strong> 11:00 – 22:00</p>
</div>
I tried almost everything but the code was always "dirty" and I doubt it is done by the way I did it. (First-child spacing and so).
So my question is How to space text like using tab with CSS?
Use the rule display: inline-block on the strong elements. This rule is combination of inline but with the ability to specify a size:
p strong {
display: inline-block;
width: 150px
/* IE7 */
*display: inline;
zoom: 1;
/* IE7 */
}
DEMO
Further reading:
CSS Display rule (on SitePoint)
Related
I'm building a multilingual site, with the owner helping me with some translations. Some of the displayed phrases need line breaks to maintain the style of the site.
Unfortunately, the owner isn't a computer guy, so if he sees foo<br />bar there's the chance he'll modify the data somehow as he's translating.
Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?
(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)
EDIT
I'll attempt to diagram what's happening:
---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------
The long word breaks automatically, the short word doesn't. I want it to look like this:
---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------
Use
.one-word-per-line {
word-spacing: <parent-width>;
}
.your-classname{
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
}
where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).
The answer given by #HursVanBloob works only with fixed width parent container, but fails in case of fluid-width containers.
I tried a lot of properties, but nothing worked as expected. Finally I came to a conclusion that giving word-spacing a very huge value works perfectly fine.
p { word-spacing: 9999999px; }
or, for the modern browsers you can use the CSS vw unit (visual width in % of the screen size).
p { word-spacing: 100vw; }
Try using white-space: pre-line;. It creates a line-break wherever a line-break appears in the code, but ignores the extra whitespace (tabs and spaces etc.).
First, write your words on separate lines in your code:
<div>Short
Word</div>
Then apply the style to the element containing the words.
div { white-space: pre-line; }
Be careful though, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:
<div>
Short
Word
</div>
There's a great article on CSS Tricks explaining the other white-space attributes.
An alternative solution is described on Separate sentence to one word per line, by applying display:table-caption; to the element
If you want to be able to choose from different solutions, in addition to the given answers...
An alternative method is to give the container a width of 0 and to make sure overflow is visible. Then each word will overflow out of it and will be on its own line.
div {
width: 0;
overflow: visible;
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
Or you can use one of those newly proposed width values, provided those still exist by the time you read this.
div {
width: min-intrinsic; /* old Chrome, Safari */
width: -webkit-min-content; /* less old Chrome, Safari */
width: -moz-min-content; /* current Firefox */
width: min-content; /* current Chrome, Safari; not IE or Edge */
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>
<span> is an inline element and I'm adding an display: inline-block to give a width to the element max-width: min-content;, min-content is the value/width of the smallest word in your text/sentance.
If you use min-content, the "width" will be your longest word. In this case Example is your longer word. But if you have different words like and if or few 2/3 char words then this words will fit on the same line.
If you want to keep the on word behavior you can give a fixed width, for example 5px.
Check more examples in CodePen.
.wrapWord {
display: inline-block;
max-width: min-content;
}
<div>
<span class="wrapWord">
Example Word
</span>
</div>
The best solution is the word-spacing property.
Add the <p> in a container with a specific size (example 300px) and after you have to add that size as the value in the word-spacing.
HTML
<div>
<p>Sentence Here</p>
</div>
CSS
div {
width: 300px;
}
p {
width: auto;
text-align: center;
word-spacing: 300px;
}
In this way, your sentence will be always broken and set in a column, but the with of the paragraph will be dynamic.
Here an example Codepen
You can't target each word in CSS. However, with a bit of jQuery you probably could.
With jQuery you can wrap each word in a <span> and then CSS set span to display:block which would put it on its own line.
In theory of course :P
https://jsfiddle.net/bm3Lfcod/1/
For those seeking for a solution that works within a flexible parent container with a children that is flexible in both dimensions. eg. navbar buttons.
//the parent (example of what it may be)
div {
display:flex;
width: 100%;
}
//The children
a {
display: inline-block;
}
//text wrapper
span {
display: table-caption;
}
I faced the same problem, and none of the options here helped me. Some mail services do not support specified styles.
Here is my version, which solved the problem and works everywhere I checked:
<table>
<tr>
<td width="1">Gargantuan Word</td>
</tr>
</table>
OR using CSS:
<table>
<tr>
<td style="width:1px">Gargantuan Word</td>
</tr>
</table>
I did this on a project where the client wanted the 3 word title on a different line. Basically your increase the spaces with CSS the use the white-space to separate the lines.
word-spacing:9999px;
white-space: pre-line;
In my case,
word-break: break-all;
worked perfecly, hope it helps any other newcomer like me.
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
This seems like a common CSS question, but for some reason I cannot find the answer to it.
consider the following Code:
<div style="width:50px;border:1px solid #000">
THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
<br/>
2nd line
<br/>
3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line
<br/>
last line
</div>
With CSS ONLY I want to add vertical space between the <br/> tags.
line-height works for the entire content, and attaching CSS to <br> (i.e: br{ margin:10px 0}), doesn't seem to work either (in Chrome at least), so I am wondering if this is even possible.
Thank you.
jsfiddle
br
{
content: " " !important;
display: block !important;
margin:30px;
}
try this
You can try this, works on chrome too, content: " " does the trick for chrome, else is happy with margins
Demo
HTML
<div>
THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
<br/>
2nd line
<br/>
3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line
<br/>
last line
</div>
CSS
div{
width:150px;
border:1px solid #000;
padding:5px;
}
br {
content: " ";
display: block;
margin: 10px;
}
Yes its possible. There are several issues related that you need to understand.
1) You're using margins. Sometimes margins will be collapsed or removed depending on content. Have you tried using padding instead? You will get different results. I don't have any direct links off hand but google around and make sure you understand the important differences between margins and padding.
2) Learn about the box-models. If you don't know about box-model: border-box, then you need to go study it. Chris Coyier of css-tricks.com has an article on it. I'm pointing it out because its directly pertinent to issues like this one.
3) display:block I don't know for certain but I think probably defaults to display: inline. You can any element it and always make it act like a standard block DIV if you set display: block as one of the properties. Again, Chris Coyier has some great information on this. Please make sure you have a deep appreciation of display: rules and their caveats.
Just adding display: block and either using margins or padding will fix your problem. If it doesn't, there's something stupid simply I'm missing. I've done this type of thing before. In fact, I've completely removed tags from Wordpress theme markups using display: none to completely reformat image gallery outputs.
I am trying to transcribe some of Prof. Dr. Edsger Dijkstra's EWD's, but running into a little problem. In his writing he likes to place comments such as 'End of Proof' at the end of the paragraph, right aligned when there is room, or on the next line otherwise. I would like to recreate this formatting, but seem unable to do so. I'd really prefer a solution using only CSS, but if that proves impossible, JavaScript is also allowed.
Please see http://www.cs.utexas.edu/users/EWD/ewd10xx/EWD1001.PDF on page number 0 (2nd page of PDF) the comment "End of Legenda" and page number 3 (5th page of PDF) the comment "End of Remark".
I've tried using the display: block / float: right combo which #starx answered with. However, as it is a float, it does not move the rest of the text down. Looking through the source document, the formatting seems ad-hoc, but it seems Dijkstra liked to keep it on the same line if possible, or move it to the next, right aligned, if not.
Searched through the different CSS specs, but I can't as yet fathom a way to accomplish this.
Assuming, you are giving class block to the element.
.block {
display: block;
width: 200px; /* minimum needed to be inline */
float: right;
}
My suggestion would be to use the :after pseudo-element to add the caption at the end of the appropriate paragraph:
.remark:after {
content: 'End of Remark';
color: red;
display: inline-block;
float: right;
}
Example: http://dabblet.com/gist/2406457
If this (End of sth) text must be on its own line, then make it a block (it could be already a block if it's a paragraph or an HTML5 footer element but then it doesn't change anything ;) ) and align text to the right with text-align: right;.
If text isn't exactly 100% right, then you can play with its width or with padding-right:
.end_of {
display: block;
text-align: right;
padding-right: 20px;
}
EDIT: by default, an element rendered as a block is 100% wide. No float, no need to either clear next element from any float or clear block element from previous floats.
If you float the extra content to the right, you will also need to clear the float, otherwise the extra content will conflict with the rest of the text.
So here's my solution. Tested on all major browsers.
.theEnd:after {
display:block;
content:'End of Latin';
text-align:right;
white-space:nowrap;
padding-left:1em;
float:right;
}
.theEnd + * {clear:right}
See jsFiddle.
Is it possible with CSS(3) to visually/textually highlight line breaks, which were automatically inserted by browsers? Something like ↻ at the end of each wrapped line.
With sourcecode it's important to see where lines were wrapped, since newlines can be significant. Letting the user scroll horizontally isn't a good idea neither …
As far as I know, there is only way to do this using pure CSS, via the :first-line pseudo-element
Concept
Add a "visual indication" to every element, by default.
Select every :first-line element, to reset the styles.
Demo: http://jsfiddle.net/djpTw/
<code>
<div class="line">Too much code at one line. Learn to write shorter lines!</div>
<div class="line">Lonely line.</div>
...
</code>
CSS:
code {display: block; width: 150px;} /* <-- Not interesting, just for testing*/
code .line { color: red; /* Visual indication */ }
code .line:first-line { color: #000; /* Default color */ }
The demo is rendered as (black by default, red as "visual indication"):
Sadly, this is not possible in pure CSS. I suspect you might be able to fake it using a tall thin graphic attached to the bottom right with no glyph in the bottom and then glyphs proceeding up as far as your tallest reasonable run-on, with the glyph spacing carefully coordinated to your line-height.