My button "TEST" is not in the same linke as my text. So the hyperlink does not come directly after the word "hyperlink" in my text but it adds a automatic break. And I dont understand why.
<div style="margin-top: 30px;">
<div class="col d-flex flex-column">
<h3>TITLE!</h4>
<p class="mb-3">
Just some text
<br>
Some more text
</p>
<br>
<h3>Second Title</h4>
<p class="mb-3">
Some text that will contain a hyperlink
<br>
HYPERLINK
Test
some more following text
</p>
<br>**strong text**
</div>
</div>
Your question should contain much more information (i.e. relevant code), but basically the a tag which contains the "TEST" tag needs to be an inline element to allow subsquent text to be on the same line (which it isn't, judging from the behaviour you describe).
Apply a class or ID to it and create a CSS rule for that class or ID wich contains display: inline-block.
Related
I have the following issue at hand where I need to get part of the text without including a tag. just to be more clear, I have the following code:
<div class="field-item even">
<p> text text text</p>
<p> text text text <a class="people-articles">text text</a> text text</p>
<p> text text text</p>
</div>
So I'm trying to get the text inside the p tag but not the a class="people-articles". and here what I've done so far but its not working
//div[#class="field-item even"] and [not a(#class='people-articles')]
Can someone tell me what am i doing wrong? and how to obtain p without a ?
this should be straight forward.
//div[#class="field-item even"]/p[not(a[#class="people-articles"])]/text()
I'm adding content to a predefined layout that I cannot modify but allows any HTML. I wish to align a piece of text like a floating text box but due to the h4 and p classes that I can't change it is proving difficult.
What I'd like to see is:
But it currently looks like:
The resulting HTML is currently:
<div class="element property-line"><h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR <div style="line-height: 90%;";>
<i> quite a long but of text that needs to wrap</i></div>
<p></p></div>
...where my content starts at BAR and ends with the i and div end tags.
I think I may be missing a formatting trick.
<div class="element property-line">
<h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR
<span style="line-height: 90%;">
<i> quite a long but of text that needs to wrap</i>
</span>
</p>
</div>
That should be more what you're after, <span> tags are suited for changing/styling text within paragraphs because <div> tags are more for structural elements.
Your original code also had an extra opening <p> on the last line.
I used MS Word to create a document as I wanted it to appear and then tripped out all the extraneous twaddle it puts in; leaving me with:
<p style="margin-left:50pt; text-indent:-50pt">
then found a workaround to mimic the <h4 class= and <p class= sections so that it all fit into one <div> instead.
I would like to find out how I can make it possible so that in a single line of text, say text, I can have some words bolded, and the rest of the text in that line not bolded. I have included a picture of my specific issue: Picture of my Issue
Specifically, as you can see, I would like to know how I can bolden "Honors:" and "Capstone:", but not the text follows in those lines.
I have included my current code below:
<section id= "about">
<div class= "container">
<div class= "row justify-content-center">
<div class= "col-sm-10">
<img src="assets/testLogo.png" width="200" height="200" alt="" class="img-fluid logoImages ">
<h1 class="text-center pt-4">XYZ College</h1>
<h5 class="text-center pt-3">B.A In Cool Stuff XYZ Test 123</h5>
<h6 class="text-center pb-3">September 20xx - May 20xx</h6>
<h6 class="text-center pt-3">Honors: XYZABC Honorary Scholarship</h6>
<h6 class="text-center pt-3">Capstone Title: The Study of supernatant fluids in extremely inert atmospheres and high temperatures</h6>
</div>
</div>
</div>
</section>
Another question that is related would be, How can I make it so that the text is left aligned, meaning that "Honors...." and "Capstone..." through separate lines, start along the same vertical axis, and instead wrap down to preserve equal white space on each side?
Thanks a lot!
There is utility class for font weight in Bootstrap 4. Check this url: https://getbootstrap.com/docs/4.0/utilities/text/#font-weight-and-italics
For your code use a span to make the font weight normal.
<h6 class="text-center pt-3">Honors: <span class="font-weight-normal">XYZABC Honorary Scholarship<span></h6>
Or you can use custom style.
Written with StackEdit.
Hi, the rendered text from the database always does not move to the next line, it always stays in just one line whether i use <h> tags or <p> tags the same thing occurs, occasionally in all my apps. This what i mean, by the way i use foundation 5 and laravel.
ANOTHER EXAMPLE
This is my code
<div class="small-12 medium-12 large-9 columns">
<h5 class="text-left grey-text montserrat-font uppercase">style description</h5>
<hr>
<div class="text-con">
<h6 class="grey-text montserrat-font testing">
{{$style->style_description}}
</h6>
</div>
</div>
Considering that your testing class have the required CSS. Add following rules to it.
.testing {
word-wrap:break-word;
}
Just add ellipsis instead of break-word.
.testing{text-overflow: ellipsis;}
I am probably missing soemthing very simple, but the following is a comment posted on in my rails app and if the content is too long..then it doesnot wrap automatically withing the paragraph and overflows onto the page.
The content of the paragraph is generated by Redcloth, though this particular paragraph does not contain any textile markup and I doubt the final result has anything to do with textile..I am probably missing a very basic css property somewhere.
<div class="comment append-bottom ui-widget-content normal-pad" id="comment">
<div class="user-image right-mar-small go-left" id="user_image"><img src="/assets/images/users/14/small.jpg?1285884662" class="profile-image" alt="avatar"></div>
<div >
<p >really really long paragraph ksdjfklajdskfjsdaklfjlaksdjflkdjsafkljasdfkljasdklfjs;lafj;klajsdf;kljdsakfljsa;ldkfjldaksjfklasjdf;kljadsfkljsad;kfjsa;ldkfj;adksljf;lkadjsfk;lajsdf;lkjsad;fkjads;lkfj;ladksjf;lkasdjf;lkdjas;flkjads;lkfjs;adklfj;ladkjf;lkdajsf;klsajdf;lksjadf;lkjsad;kfjsa;ldkfj;kladsjflkdsajfkljdask;lfjkldasjflk;ajdsflkadsjflkjdflkjadslk;fj;ldksajf;lkasdjf;lkjadsfk;ljads;klfjdask;lfj;ladkjf;lasdjf;</p>
</div>
<div id="" class="prepend-top">
<span>Like </span>
</div>
</div>
The reason is that you do not have any space characters in the long word. Try the solution mentioned in the 3rd comment.
How to prevent long words from breaking my div?