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");
}
});
});
Related
I have a span tag with inner html like this
In my html :
<span [innerHTML]="description"></span>
and in my ts:
description = "some random text https://stackoverflow.com/ 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"
It displays the link but when I click on that link it is opening in the same tab but I want it be opened in a new tab.
Is there any way to do this?
In this case that you are using innerHtml property binding you can place a html link in your description text with target="_blank" to open the link in a new tab:
description =
'some random text https://stackoverflow.com/ 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';
I have a very specific problem, so:
I have a medium text in My MySQL database. for example (with breakline):
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.
I would like to get this text now using the get HTTP method and on my site display, all Lorem Ipsum in bold.
Is something possible to get?
I use ReactJS with Redux + Redux-Saga
or Maybe IN databases, I can insert the medium text in html but how to display it on the frontend then?
Store html and use dangerouslySetInnerHTML to render it. You can have a deeper look into it reading this post.
const text = '<strong>Lorem ipsum</strong> dolor sit';
const App = ({html}) => (
<div dangerouslySetInnerHTML={{ __html: html }} />
)
ReactDOM.render(<App html={text} />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
This question already has answers here:
Indent starting from the second line of a paragraph with CSS
(6 answers)
Closed 4 years ago.
i want to show second line of wrap text with space .
OUTPUT:
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
EXPECTED OUTPUT:
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
my code:
<style>p{
overflow:word-wrap;
}</style>
<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</p>
Thanks in advance.
This is pretty easy to handle. The trick is to add a little padding, and then actually "indent" the first line with a negative value. Sort of thinking outside the box.
p {
padding-left: 2em;
text-indent:-2em;
}
<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
</p>
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;
}
I have a huge XML file with multiple blockquotes code sections like this:
<blockquote>lorem Lorem Ipsum<i> is simply dummy text</i> of the printing and typesetting industry. "Lorem Ipsum has been the industry's standard dummy text" ever since the <b>1500s</b>, when an unknown printer <i>took a galley</i> of type and scrambled it to make a type specimen booki>
I need to select all the blockquote and content inside blockquote tags in order to remove and clean unnecessary tags like:
<i>, <em>, </em>, </p>, </i>, <b>, </b>, <strong>, </strong> and " inside the text.
End results:
<blockquote>lorem 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</blockquote>