I guess this problem is very simple to solve, but I don't know what to search for..
I want to have always the same space between words in multiple lines. Like invisible tables, but I want to avoid tables.
Example:
01.01.1999 Text
02.01.1999 Text gdfgf
03.01.99 Text gfghdh
How would you do this?
PS: I need a solution which applies on each row, because the data is delivered row per row through serverside scripts.
You could use the <pre> tag, unless you're looking for special formatting within each row. Description lists <dl> maybe another option in that case.
<pre>
01.01.1999 Text
02.01.1999 Text gdfgf
03.01.99 Text gfghdh
</pre>
Technically you could place a span (with the same class) around the text that you want to pad out and give the span the same width so that it pushes the other text out.
for example:
span{
width:100px;
display: block;
float:left;
}
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
Can one control line wraps with CSS.
For example, I’d like to wrap lines with the approximately same amountof words per line. Or at least so there is no one-word lines.
Original:
Some words for a really long title that most likely will take two lines
Ideally:
Some words for a really long title
that most likely will take two lines
At least:
Some words for a really long title that most likely will take
two lines
Is it achievable with CSS?
It's absolutely achievable! Simply give the target element a fixed width:
div {
width: 240px;
}
<div>Some words for a really long title that most likely will take two lines</div>
Note that the element must be block-level (which <div> is by default). If you want to make use of a <span> tag, for example, you'll need to apply display: block as well:
span {
display: block;
width: 240px;
}
<span>Some words for a really long title that most likely will take two lines</span>
Obviously you'll need to play around to find the exact width that the element should be, based on the length of the text you want to span multiple lines.
You could use a variable width, though that would cause the amount of text split onto each line to vary at the various screen widths. A fixed width ensures that exactly the same amount of text is shown on each line on all devices.
Hope this helps! :)
I am trying to left-align all lines of text string within a table in netsuite, but the text does not always have the same width, i.e. is not always more than 1 line.
The demo template seems to work okay;
demo
However, when it comes to printing a sales order, the text string that spans multiple lines, ends up adding white space to the all but the final line of text. Similar to justify style, even though this is never mentioned in the template.
actual
Add this CSS to your templates to fix this issue:
td p {
text-align: left;
}
Credit
In HTML, is it possible to have a group of an image and text that cannot be broken by word wrapping? i.e. would either be rendered together on one line, or wrap together to the next?
This can be done with words, by using but I want to add a small, letter sized icon to this group.
Example:
<p>
Some some normal, wrappable text
<span class="unbreakable"><a><img src="logo.png"></a>&nsbp;<a>Product Name</a></span>
</p>
NB. for brevity I have removed the attributes from the <a> tags.
Currently, it is possible for the "logo.png" image to appear on one line, and "Product Name" on the next.
This code is part of a resizable element, sometimes it will be capable of being rendered on 1 line, others it will need to, so I don't want to force a <br> for the times it is not needed.
Extending from comment:
As you want to combine logo and product name as a whole "un-wrappable" part, you can use white-space:nowrap:
fiddle
.unbreakable
{
white-space:nowrap;
}
I've noticed that if I have two links :
Text
Text
They are not joined in the browser, looks like there is a space between them.
But if I wrote them in one line :
TextText
there is no space. Is there a way to delete that space? Or I need to write all links (or better, all inline elements) in one line?
You can use word-spacing write like this:
a
{
display:inline;
background-color:red;
word-spacing:1em
}
body{word-spacing:-1em}
Check this http://jsfiddle.net/eAteH/2/
There other way also like font-size:0 check this Strange margin on `display:inline-block`-elements