Remove whitespace around text in div - javascript

Is it possible to remove white space at the end of text with CSS (or optionally with JS)? I've tried all kinds of display property, but none of them seem to work. I would need to dynamically insert a blink-div at the end of multi line sentence. Currently it's is being added outside of phrase-div that contains sample text (which, as a div, is rectangular with white space I don't need). HTML structure looks like this:
<div id="writr-div">
<div id="phrase-div"></div>
<div id="blink-div"></div>
</div>
Please check out the both images:
Original:
Desired effect (border and background are for preview purpose):
EDIT:
Okay, I may haven't made myself clear enough. This is what I want (that's not an absolute position, I need it to be at the end of the sentce, no matter how long it is):
Thanks,
Luca

Simply use span:
#writr-div {
width:140px;
border:1px solid;
}
#blink-div {
border:1px solid red;
}
<div id="writr-div">
<span id="phrase-div">Some text here and there</span>
<span id="blink-div"> another text</span>
</div>

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

Hide element if empty or has white space inside (Ionic 2)

I am building an app in Ionic currently, I need to hide some elements have area empty with some white space inside. I can execute this with jQuery as seen below.
jQuery('.course p').filter(function() {
return $.trim($(this).text()) === ''
}).remove();
I have a custom.js file imported but nothing seems to be happening?
Is there a better way to do this? If so, please give me some advice.
Thanks!
I have added three p elements into the snippet - one with a space, one with a non breaking space and one with text. Then the function iterates over each - determines is content after trimming it to get rid of the whitespace and tehn add removes it. So what remains is just the single p element with the content - note that I have put a border around the p' elements to show them.
I have just put a button in so that the initial state can be seen as three p elements and then on the click of the button - two are removed.
The first p is essentailly a collapsed div with the border - so it shows as a thick line initially, the second p is the nbsp and shows as an empty box - then the last one is the one with text. This is the only one that will remain after clicking the button.
$(document).ready(function(){
$('#trimButton').click(function(){
$('.course p').each(function(){
if($(this).text().trim() === ''){
$(this).remove();}
})
})
})
.course p{border:solid 1px red; margin-bottom:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course">
<p> </p>
<p> </p>
<p> test</p>
</div>
<hr/>
<button type="button" id="trimButton">click me to remove the empty p elements</button>
From my checks, your code should work fine;
$('#trim').click(function(){
jQuery('.course p').filter(function() {
return $.trim($(this).text()) === ''
}).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course" >
<p style="border:solid 1px red; margin-bottom:10px"> </p>
<p style="border:solid 1px red; margin-bottom:10px"> </p>
<p style="border:solid 1px red; margin-bottom:10px">this is </p>
<p style="border:solid 1px red; margin-bottom:10px"> this</p>
</div>
<button type="button" id="trim">Clear Empty Elements</button>
May be an issue with the way the js file was imported or the maybe the jquery selector cannot find the element because it is incorrectly named?
Alternatively, since you are using angularjs, you should consider using ng-if
ng-if="*yourDataSource*.name.indexOf(' ') !== -1"
or as of ES2015
ng-if="*yourDataSource*.includes(' ')"

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.

Break Text automaticly, justification behind username?

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/

jqMath Equation Line Wrap

I have started using jqMath for equations on my website and I need to be able to wrap these equations when their outer div has a fixed width.
<div id='math'>$$ x={-b±√{b^2-4ac}}/{2a} \text'A little bit of text that goes along with this.' $$</div>
CSS:
#math {
width: 100px;
}
At the moment jqMath will just continue the text and equations in a long line, I need to make sure that the 'math' div will be a certain width and there will be no scrolling within it.
Any help would be greatly appreciated.
If you want to wrap text, then you can try like this..
<div id="math">
$$x={-b±√{b^2-4ac}}/{2a}$$
<br />
$$\text' A little bit of text that goes along with this.'$$
</div>
or simply do this
<div id="math">
$$x={-b±√{b^2-4ac}}/{2a}$$
<br />
A little bit of text that goes along with this.
</div>

Categories