I have a h1 element that looks something like this:
But I want the output to look something like this:
Is there a way that we can achieve it in HTML5? CSS3? JavaScript? JQuery?
Please let me know. Thank you.
As requested by #Ethyl I'm posting this as an answer
You can use word-wrap CSS property. You set a small width and break-word for the word-wrap property. Check this fiddle http://jsfiddle.net/1eje4uu4/.
HTML
<h1>Hello</h1>
CSS
h1 {
width: 5px;
word-wrap: break-word;
}
I can't tell you how reliable is this option, but it's one way to go.
You can use <BR> inside an <H1>.
<H1>H<BR>e<BR>l<BR>l<BR>o</H1>
<h1>H<br>E<br>L<br>L<br>O</h1>
And the output
HELLO
Use this jQuery:
$('h1').html($('h1').html().split('').join('<br>'))
Working example
** this will work on dynamic text.Check this with dynamic data
Related
I wonder how can I achieve the same selectable new line as this for <textarea/>.
and this is what the normal textarea looks like image.
I'm currently using react and I tried researching for answer everywhere but I can't find any solution that will work or relavant to the result I'm trying to achieve.
Thanks all
In your stylesheet add:
textarea {
white-space: pre;
}
This allows new lines to be selected as well.
This is very simple, you can use tag in html and add the below code to css file.
textarea {
white-space: pre;
}
I want to ask a question! But my English is not good. I will try my best to describe my problem completely!
Today there is a p tag, and the text inside will be brought in from the back end. I hope to eliminate the extra white space before and after, no Do you know whether it can be easily achieved with CSS?
Should I still use javascript to achieve this? But I don’t know much about javascript. I hope someone can share how to use javascript to solve this problem~ But I hope is a better CSS solution.
.demo {
white-space: pre;
background: #eee;
}
<p class="demo">
lorem
test
demo
</p>
Try the trim() function:
myString = " abc "
console.log(myString.trim())
you can do something like that
function someFun(){
const element = doucument.getElementById("requiredElement");
element.innerText= element.value.trim();
}
Hi i am trying to edit a "margin-top" property in javascript.
The following code snippets work in my Safari 6.1.6 but not in my Safari 10.1
document.getElementById("fbContent").setAttribute("style", "margin-top: 70px!important");
document.getElementById("fbContent").style.cssText = "margin-top: 70px!important";
document.getElementById("fbContent").style.setProperty("margin-top","70px","important");
Any suggestions how to solve this?
p.s. if there is the possibility i don't want to use jquery!
thanks :)
Update: thanks for the current solution but the only browser these solutions work is the old safari(6.1.6)
You can do this:
document.getElementById("fbContent").style.marginTop = "70px";
<div id='fbContent'>fbContent</div>
You can put CSS into the page using JavaScript:
function addNewStyle(newStyle) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(styleElement);
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('#fbContent {width:70px !important;}')
This method will add a style tag to the bottom of the head element which will overwrite any previous style tags. This is why this works.
The reason the other 'simple' option doesn't work is purely because javascript doesn't support it.
Try setting the css property directly and not via setProperty method.
document.getElementById("fbContent").style.marginTop = "70px"
CSS Only Solution
https://jsfiddle.net/99b85ymb/3/
#fbContent {margin: 'whateverItIs'}
body #fbContent {margin-top: 70px;}
<div id="one">
<div id="fbContent"></div>
</div>
Hope this helps
EDIT: in my fiddle I only targeted the background color to show it works.
EDIT2: made it simpler. You only need to edit the CSS now.
I agree with the existing answers to do it like this:
document.getElementById("fbContent").style.marginTop = "70px";
sure this works, but it's a better way to split CSS and JS strictly. In order to achieve this I would advise to define a CSS class and add it with your Javascript.
CSS:
.marginTop { margin-top : 70px !important; }
JS:
document.getElementById('fbContent').class += ' marginTop';
Or with Jquery:
$('#fbContent').addClass('marginTop');
i'm trying to create a Dynamic Sub-menu to use it in Wordpress, Something like this: http://picbox.im/image/2b5fb80c74-preview.jpg but there is a Width Problem, the width is 'auto' but it is not floating the sub-menu, it is a list, I want they with float:left , but it is not happening, what should a do?
Here is this: http://jsfiddle.net/hD7Ay/1/
There is another problem: The List-style isn't working right.
Thanks a lot in Advance.
Ok lemme know if this is what you were trying to achieve, your question kinda lacked of design meaning.
http://jsfiddle.net/3tsnN/
To Make them all in one line, Use that rule in the SubMenu Ul : white-space: nowrap;
Example Here: http://jsfiddle.net/hD7Ay/3/
Thanks for the help!
I have a div which has width of say 200px. It does not show horizontal scroll bar. Now if anyone types any word more than 200px worth, it is simply hidden. I am wondering if its possible to automatically put a newline tag after every word reaches 200px length?
Thank you for your time.
You can achive this using simple CSS using
WORD-BREAK: break-ALL.
<div style="width: 200px; word-break: break-all">Content goes here</div>
Hope this is what you were looking for...
It's a tricky problem, but you should probably read http://www.quirksmode.org/oddsandends/wbr.html.
basically, there is somewhat inconsistent support and the linked article proposes use of:
wbr:after { content: "\00200B" }
in your css, and using the <wbr/> tag in your html
There is a soft-hyphen that lets you define where a word can be broken up (For example, prod-uct-iv-ity) which doesn't display any hyphens, just defines where they could show up if the word has to wrap lines. It is entity
If you have mono-spaced font, it'd be easy to count number of characters, and just insert a break-tag. But it's harder to calculate where to put in the break-tag with normal fonts.
For IE, you can set word-break: break-all; which will break words when they reach a certain length...
word-break is good, but it is said not to work in firefox. (haven't tested.)
For firefox, use javascript.
It does work in webkit though.