Is possible to select part of text in CSS3 until "br" badge whitout editing html.
I want to select this part:
"Lorem Ipsum is simply dummy text"
<p>Lorem Ipsum is simply dummy text <br/>
of the printing and typesetting industry.</p>
You can use the first-line modifier as shown below:
p:first-line {
color: red;
}
As #JordanS has correctly highlighted, there are cases where this will fail. For a robust solution you either update the HTML or use javascript.
https://jsfiddle.net/01c5tbst/
Update:
For posterity the solution actually desired to apply the style only to the first line of the first matching element on the page, so the final solution actually was this:
p:first-of-type::first-line {
color: red;
}
Related
I wanted to add the bullet sign (•) instead of the spaces to separate words; this could be easy to achieve with JavaScript but can we do this with plain CSS?
Here's the code:
<p class="text">lorem ipsum dolor sit amet</p>
<!-- the styled text should be like "lorem•ipsum•dolor•sit•amet" -->
<style>
p.text {
/* style */
}
</style>
Easiest way that comes to my mind is using HTML entity code for bullet circle •, which you insert between each word. So no CSS needed just HTML. Not sure if that's helpful for you.
You can do it like so:
<p class="text">lorem•ipsum•dolor•sit•amet</p>
and you would get:
lorem•ipsum•dolor•sit•amet
A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break <br>. I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:
br + code {
background-color: yellow;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.
The problem with example B is that there is plaintext content in between the line break <br> and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.
Example C is an HTML way of fixing this issue. I added an empty <span> in between the <br> and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the <br>.
But I would prefer a CSS-side fix to this issue. What is it, if any?
Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:
Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.
The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with <span style="font-size: 12px">. If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.
This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the <p> and <br> tag. Here is a great SO post talking about semantics and their importance.
TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:
.highlighted {
background-color: yellow;
}
<p>Your first paragraph</p>
<p>A second paragraph without the linebreak</p>
<code class="highlighted">... code that is highlighted ...</code>
<p>A third paragraph</p>
<code>... this code isn't highlighted ...</code>
Why you don't put all element that you need to change background to
<div style="background-color: yellow;">
<br>
<p>
</div>
Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:
br + code {
background-color: yellow;
}
h2:nth-child(3) + p code:nth-child(3) {
background-color: inherit;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Say I have some text
"Lorem ipsum dolor sit amet,"
and I want to quickly add tags around "dolor sit". I am aware that I can type bold and press tab but then both tags will appear before the "dolor sit"
"Lorem ipsum <bold></bold>dolor sit amet,"
Is there any shortcut to just add the bold tags directly around the text? (I'm using also emmet)
Try to use Wrap With Abbreviation action: https://docs.emmet.io/actions/wrap-with-abbreviation/
Css of:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown</p>
Style will be different compare to text have just one line:
<p>Lorem Ipsum is simply dummy text</p>
Is it possible?
Thank you so much :)
Did you want the line inside the paragraph to have a different style if so you can just add a span with an id to the area you want with a different style.
#line{
font-weight: bold;
}
<p><span id="line">Lorem Ipsum is simply dummy text</span> of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown</p>
If you are looking to target a single vs multiline sentence in CSS, this is not possible.
If you want to restrict your <p> to just one line use white-space: nowrap;.
Short answer is no. The length of the actual text in a paragraph doesn't effect the style of it.
However if you assign the paragraph tags within classes or id's then you can set each individual class or id to unique styles within the css style sheet.
You would have to do this programmatically with JavaScript.
Find the paragraph elements, check the length of the content and then apply a style based on that.
Here's a jsfiddle to illustrate (with jQuery).
HTML
<p>A short line.</p>
<p>A longer line with more words in it.</p>
JS
$("document").ready(function() {
$("p").each(function() {
if($(this).text().length > 15) {
$(this).css("color", "red");
}
});
});
Is there a css property that can limit the number of characters to be displayed in a div.For example
<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
but I need to display only
<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
I am using wordpress site with testimonial feature. So if any customer adds a testimonial, I need to display only the first few words with the link. Please Help!! Thanks!!
You can play around with a overflow property (actually there are couple of them - overflow-x, overflow-y and overflow), also you have to set the width in absolute units (read pixels or em, but not in percentage) of your div.
For example (CSS):
div.main-text {overflow-x: hidden;width: 200px;}
/*This will hide everything, which goes outside of the 200px div*/
Also you can limit your text with simple PHP code:
if (!function_exists('chop_string')) {
function chop_string($str, $len) {
if (strlen($str) < $len)
return $str;
$str = substr($str,0,$len);
if ($spc_pos = strrpos($str," "))
$str = substr($str,0,$spc_pos);
return $str . "Read more...";
}
}
Place the above function in your Wordpress theme's functions.php file and use it like this:
<?php echo chop_string('Bla bla bla', 5); ?>
The above code will show only 5 characters from your string and Read more....
EDIT:
If you want to cut the title or the generated content which comes from Wordpress, then you have to edit your page.php file (also archive.php file), they are inside your template directory. Find the following code in those files: the_content() and the_title(), those 2 functions display actually all information from database.
So cut them like this:
<?php echo chop_string(the_title(), 5); ?> or
<?php echo chop_string(the_content(), 5); ?>
There are two ways you can achieve this :
1) CSS way
add the css property text-overflow:ellipsis
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2) Trick way (HTML)
add a textarea control inside the div and add **maxlength=50** or whatever you need , hide the border using the css border:none property.
You can use css ellipsis. Just use it on the text-overflow. It will truncate adapt to the width of you box.
http://davidwalsh.name/css-ellipsis
http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
.main-text {
width: 250px;
}
.main-text p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
One limitation is that you are restricted to use one row.
No, CSS is presentational, so not involved with the length of specific content. It can clip on presentational properties such as box size with the overflow and text-overflow properties, but not based on content. You can easily fix it on the server side though:
$text = strlen($text) > 250 ? substr($text, 0, 250).'…' : $text;
echo "<p>$text</p>";
This inserts an ellipsis after 250 characters if the text is longer than that.
With the help of CSS3 property "text-overflow" - you can set the box width, thus resulting with the exact width for ALL divs;
Text won't be cut in the middle of the word and it will add "..." at the end of the text, hinting it's a preview text;
HTML Code:
<div id="myDiv">Just some text - you won't see ME!</div>
CSS Code:
#myDiv {
background: red;
color: white;
font-size: 20px;
height: 50px;
overflow: hidden;
width: 256px;
white-space:nowrap;
text-overflow: ellipsis;
}
Tested under FF, Chrome, IE11
This is my solution demo: limit-printed-words.html
It works well with any nested level and even button content.
Source project: scriptbucket