Break Text automaticly, justification behind username? - javascript

I have the following problem:
When the text I wrote is to long for the DIV, it breaks at unpleasant places, how do I set it at where to break?
Long text: Test: Hello My Name Is Tim4497
But it breaks after "Test:" so it looks like below:
Test:
Hello My Name Is Ti
Do you know how to make it look like:
Test: Hello My Name
is Tim4497.
after the line break, it has to line up after "Test:"
Also, if it breaks into multiple lines, the line spaces must be the same.
So far this is what I have but doesn't do what I wanted.
HTML-Code:
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
How to solve this problem with JS or Html/CSS?
Thank you :),
tim4497

There are many ways to do it... Perhaps one of the cleanest would be through css table and table-cell. This will place your elements side-by-side perfectly.
Make your wrapper div a display: table and your spans display: table-cell. (don't forget to put your ":" inside a span too, for better visual)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS:
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/ - Resize the screen and see, or set a width to the last span...

You can use floated DIV's to achieve something like this effect:
<div style="width: 200px; background: blue;">
<div style="float:left; background: red;">Name:</div>
<div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
<div style="clear: both;"></div>
</div>
Floating can be a complicated topic if you don't know much about it, though. See All About Floats from css-tricks.com.
http://jsfiddle.net/eezpzj0L/

Related

Making text align with DIV in div-based HTML page in CSS?

My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/
The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example.
This is my code, taken from the JSFiddle above:
<div class="card">
<img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">
<div class="card-info">
<h2 class="listing-title title-wrap">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</h2>
<p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
<ul class="listing-key-specs ">
<li>2020 (20) reg</li>
<li>Estate</li>
<li>40 miles</li>
<li>3.0L</li>
<li>339BHP</li>
<li>Automatic</li>
<li>Petrol</li>
<li>1 owners</li>
</ul>
<ul class="listing-extra-detail">
</ul>
<p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
<div class="seller-info ">
<div class="phone-code">
Tel: (0114) 49600000
</div>
<div class="seller-type">
Trade seller
</div>
<div class="seller-location">
<span class="seller-town">Sheffield</span> -
43 miles away
</div>
</div>
</div>
<section class="price-column">
<div class="vehicle-price">£46,795</div>
</section>
</div>
Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have .
There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).
Like this:
This is the intended end result:
I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.
I would really appreciate any advice or guidance on making this look better.
Try using overflow: hidden in .layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:
.layout{
//rest of the styling here ....
overflow: hidden;
}
.ul{
//rest of the styling here ....
white-space: nowrap
}
.card-info
{....}
.card-price
{
padding: 1rem;
font-size: 0.9rem;
}
In Your CSS Change the padding of card-price from 2rem to 1rem
check the space in the image

How to start a new row in Angular 2 templat

I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.

How to manage text breaks in span using js, css or anything else

The title might be a little confusing, but didn't know how to name it correctly. Basically I have a text like this:
content3 (-content1) content4 (-content2)
which I display in a span element. The element has a varied widths and in some case text above needs to be broken into two lines. Unfortunately it often brakes on '-' symbol which make it look like this:
content3 (-content1) content4 (-
content2)
Is there any way I could prevent it from happening. Would be happy with this format:
content3 (-content1) content4
(-content2)
If you enclose your content in a span, you can use white-space:nowrap; to make the content drop down.
HTML
<div class="sup" id="pr">
<strong>
<span class="content">content3</span>
<span class="content">(-content1)</span>
<span class="content">content4 </span>
<span class="content">(-content2)</span>
</strong>
</div>
CSS
.sup {
width: 300px;
border: 1px solid black;
margin-bottom: 2px;
}
#pr {
width:100%;
}
.content {
white-space:nowrap;
}
JSFiddle
You can always go around this by using a non-breaking hyphen ‑.
I'm not sure if this is the ideal solution and it isn't elegant but it will solve your problem and it is simple.

Floating repeated divs, how to keep XY together

I am currently creating many figures using the JavaScript library D3 (but I don't think D3 has any relevance for my problem). The figure is placed in div X and the text explaining the figure is in div Y. I basically want to create a pattern like this:
XYXYXY
XYXYXY
but instead (depending on how wide my window since I do not want to fix the width), what I get this:
XYXYX
YXYXY
I tried putting XY in a parent div Z<XY>, so that every pair of XY stays together, but that does not work. I also don't think clearing is necessarily the answer here, but I have tried all combinations without success.
Any help is greatly appreciated.
Try
white-space: nowrap
You may also have to change the floats to for your XY divs:
display: inline-block
If I understood the problem correctly, you don't need to use float. Display the divs as inline blocks: display: inline-block.
That will flow the divs as "character blocks" doing the wrap, you'll need to have a parent for the XY to keep the text together with the image.
An example: http://jsfiddle.net/D9BAv/
HTML:
<div class="figure">
<div class="picture"></div>
<div class="text">Example 1</div>
</div><!-- reapeated ... -->
CSS:
.figure {
display: inline-block;
}
.picture {
width: 3rem;
height: 3rem;
margin:auto;
background-color: blue;
}
If I have understood you correctly, maybe this will work. You could also use display: inline-block instead of float: left if you don't need to support IE8 and below.
http://jsfiddle.net/GQ8Uw/
HTML
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
CSS
.cont {
width: 100px;
float: left;
}
.x, .y {
width: 50%;
float: left;
}
.x {
background: #ccc;
}
.y {
background: #ecc;
}
Ok, I solved the problem. So I was wrong, it did have something to do with D3. Each time, I was essentially adding a child div to the same parent, and therefore the inline-block simply had no effect.
I ended up adding a "last-child" feature in my code like "d3.select(".figure:last-child").append(...", for both the picture and the text, and it works perfectly.
I saw the problem by adding a border around the parent div, and I noticed that all children were in the same div. I then found the solution from: What is the equivalent of jQuery's $(".cell:first") in D3?

Auto Arranging the elements using css

I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4

Categories