I have this html
<div class="externalWidth">
<div class="container">
<div class="element">this_is_a_really_long_text_without_spaces</div>
<div class="element noWrap">:-)</div>
</div>
</div>
<div class="externalWidth">
<div class="container">
<div class="element ">this is a really long text without spaces</div>
<div class="element noWrap">:-)</div>
</div>
</div>
and this css
.externalWidth { width: 200px; }
.container { margin-bottom:10px; display:inline-table; height:40px; width:100%; }
.element { display:table-cell; }
.noWrap { white-space:nowrap; }
I have made an jsfiddle to demonstrate it. The texts in both .elements are read from a server and bound via knockout. I want this to look as follows:
the second .element should have as much space as it needs
the first .elementshould have the remaining space. It should break into multiple lines if possible.
Everything works fine but long words causes the whole table to expand. Is it possible to break within words if necessary?
I've also tried table-layout:fixed; but that made two 100px colums.
Edit: Thanks. word-break: break-all; did exactly what I needed.
Use CSS word-break Property
try this DEMO
You could "pre-process" your content (on the server or in JS if you can't do this on the server) to inject a soft-hyphen into very long words. is the entity to use, and this will allow modern browsers to break at the soft-hyphen as required, but when it is not required, there won't be a visible gap in the letters.
word-wrap: break-word;
word-break: break-all;
To add a pre-process option, you could use the html tag <wbr/>, the word break. It does the same thing as the soft hyphen (), but without adding an unsightly hyphen when it breaks :) here's a forked fiddle for you.
Just insert the tags after every underscore. In javascript:
str.replace(/_/, "_<wbr>");
Related
I have text coming back from the server containing carriage return (enter). I asked some people what to do to display this text on multiple lines, and they advised me to use the white-space: pre.
Is there any other way to display the text on multiple lines without white-space: pre? Or any way to make pre act like a paragraph but with multiple lines without having the extra padding?
Here's what I have:
.gallery-Gcontainer {
margin: 0 !important;
padding: 0;
}
#genericpartTitle,
.content {
padding-left: 20px;
}
.content .sidebar,
.content section {
display: inline-block;
width: 30%;
border: none;
vertical-align: top;
}
.content .sidebar img {
width: 200px;
}
<div class="gallery-Gcontainer">
<div class="header-area">
<h3 id="genericpartTitle">my page</h3>
<hr>
</div>
<div class="content">
<div class="sidebar">
<img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" />
</div>
<section>
<h5 class="item-title">Welcome to my first page</h5>
<p style="white-space: pre" class="description">
Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines.
</p>
</section>
</div>
</div>
Update:
Putting: white-space: pre-line as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.
Instead of white-space: pre use white-space: pre-line.
From MDN:
The white-space
property
The white-space property is used to describe how whitespace inside
the element is handled.
normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as
necessary to fill line boxes.
nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Also, the padding-top issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.
If possible then use below javascript code for CSS .
var ss = " Hello`, anything will go here, text will come from the server like this, and I need to display it on multiple lines.";
document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br/>');
or
document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br>\n');
<p id="test"> </p>
use "display:block" as your css styling. This should break onto new line.
<p style="display: block" class="description">
I have the following HTML structure:
<div id="wrapper">
<div id="some-id"></div>
"this is some texxt"
<div id="some-id-2"></div>
</div>
How can I remove the text with CSS?
Can't think of a very good way to do so, but
#wrapper {
font-size:0;
}
Would work.
Notice, that if the other two divs have text anywhere inside them, you will need to redefine new font-size for them, since it will be overwritten.
Not sure if this will work on every browser, but you should give it a shot.
#wrapper {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, and has much better performance than changing the font size.
More here - Replacing the -9999 font
Its not sexy - but it works - and I am assuming that you want the two divs, but not the text in the middle. If you can only affect the content with CSS (and not javascript / jquery) - then you could try the following. Force the background of the second div to be white and move it up by 1em using position relative / top -1em. That way it will cover over the offending text.
As I said - not sexy and I do NOT recommend using this - far better to find a way of actually modifying the content of the #wrapper div.
#some-id-2{
background:white;
display:block;
position:relative;
top:-1em}
<div id="wrapper">
<div id="some-id">text content 1</div>
"this is some texxt"
<div id="some-id-2">text content 2</div>
</div>
I recommended you to use jQuery code to remove the text definitely from the client side, because may be you will have some issues with some browsers.
If you decide to use jQuery you can place the following code in your page:
$(document).ready(function(){
var divContent = $("#wrapper").find("div");
$("#wrapper").html(divContent);
});
if the wrapper div can contain more HTML tags for example:
<div id="wrapper">
<div id="some-id">aaaa</div>
"this is some texxt"
<div id="some-id-2">bbbb</div>
<p>Hello world</p>
</div>
You can combine HTML tags in the find jQuery function by separate them by comma:
$(document).ready(function(){
var divContent = $("#wrapper").find("div,p");
$("#wrapper").html(divContent);
});
This is more save and clean
I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
My css:
.testBox {
width: 100px;
height: 200px;
border: 1px solid;
word-wrap: break-word;
word-break: normal;
}
My HTML:
<div class="testBox">
<p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元<span>人</span><span>民</span><span>币</span><span>。</span>这也是迄今为止中国开出的金额最高的一张价格违法罚单</p>
</div>
<div class="testBox">
<p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元人民币。这也是迄今为止中国开出的金额最高的一张价格违法罚单</p>
</div>
<div class="testBox">
<p>123456789<span>a</span><span>b</span><span>c</span><span>d</span>efghigkilmnopqrstuvwxz</p>
</div>
<div class="testBox">
<p>123456789abcdefghigkilmnopqrstuvwxz</p>
</div>
Please pay attention for “亿”！after that , there is a break-word in Chrome,but not in IE When
I've made some "span" wrapping the character.....why??? how to write to get the same effect
In the CSS documentation:
The word-break property specifies line breaking rules for non-CJK scripts.
Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.
So, I guess it doesn't work for CJK Scripts...
Use
word-break: break-all;
According to the CSS3 Text draft, such a setting allows a line break between any two letters. It adds: “This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.”
The value normal means that “words break according to their usual rules”, which are more or less browser-dependent.
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/