I have a fixed-size div with generated text inside it.
Is there some simple way to cut the text before div's end and add "..." at the end using DOJO or plain Javascript? Is there a way to do it regardless of what size of font i use?
The only way that comes to my mind is to calculate how many characters with actual font fits into my div and than cut the text to be that long, but this looks pretty lame :-) any suggestions?
May be it helps dojo.html.ellipsis
Related
I am new to coding so I hope this is not too unclear:
I am learning Javascript, CSS and HTML through making a simple HTML calculator of which the display is a textarea (unless there is a better option for what I describe below).
I would like the contents of the textarea to be the same height as it at first, becoming smaller as the numbers require more width. However, I would like there to be a particular text size at which it begins to wrap (break onto the next line) without overflow. Ideally, the text would continue to get smaller and wrap onto more lines in order to fit in the textarea (this may not be practical for a real calculator, but this is also an exercise in design).
I have tried a few ways with word-break, word-wrap and overflow-wrap but none have had any effect, I imagine it might require some script as well and maybe some a more nuanced definition of the textarea size.
This may be complex or too ambitious but I would like to see if it is possible first!
Thanks a lot in advance.
I'm trying to have a block of text in a div fill a downward triangle shape. Is there any way to achieve this with either CSS or Javascript?
This is for a site in which users can dynamically insert text. I'm trying to avoid the alternative method, which is to have them insert text line by line with a limit on each line.
I don't know of any simple way to do what you are asking for. The best thing I can think of would be to use something like the CSS text wrapper, which can fit your text to any shape. I haven't used it myself so I don't know what problems you will run into.
Your question is very similar to this one.
I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.
See this demo: http://jsfiddle.net/gilly3/CmguZ/7/
You could wrap each line of your text with a <span> and use margins to recieve the wanted affect and if you want the shape to have a color use photoshop to create a triangle with the desired color and put it on the background.
you can try playing with CSS border slopes, but I don't think it fits your needs entirely, because it's a bit complicated and you have to wrap the text manually. there are some good examples of this method here, but it is for simple shapes basically, not for text containers.
I'm creating a page where there's a textbox that displays a text string from the database, and its length varies. Because of this, some strings happen to be long enough to run onto two lines, but that second line is short, and this doesn't look good:
Here the blue box shows the div that contains the content. It's got a fixed width (80% of the container), and text-align:center.
So my question is: how can I get the text to flow into lines where the line widths are closer to each other? I'm willing to do some math and dynamically adjust the width or font size, but I'm not sure how to do this reliably.
You need JavaScript to do this. CSS alone cannot fix this issue if you are using dynamic text.
Once you've detected that the height of the box goes beyond the limit of one line you can either shrink the font, expand the box or calculate the mid-point to add a break and have two balanced lines.
Here are various jQuery plugins that an do this for you. There are many if you look.
http://fittextjs.com/
https://github.com/jquery-textfill/jquery-textfill
personally I don't like use javascript to "simple things"
you use the following properties
overflow
white-space
http://jsfiddle.net/ALWqd/
I'm trying to create a WYSIWYG editor that's custom and spans multiple divs if the div height is matched. Does anyone know a way to do this?
I was thinking you could count the lines first and that's by knowing the line-height. If that's the case, what's a good method to grab the text of a div that makes it over 200px and push it to a new div?
How do I iterate through lines of text in a div that ONLY has the natural breaks?
Another method is to max the height out on a div and set overflow to hidden. But then how do I natural get the text that is hidden from a div?
If anyone knows of an answer or solution, we would greatly appreciate it :P Thanks. If there is even a WYSIWYG editor out there that is as good as Google Docs, also let us know!
Much appreciated. Love StackOverflow!
How about using TinyMCE. Its really good and you can customize and reduce the size suitable to your needs.
Read about word wrapping / text wrapping
http://en.wikipedia.org/wiki/Word_wrap
Is there any way to make textarea display lines in colors? What I am trying to achieve is every second line colored, i.e. white,grey,white,grey,white,grey... for better readability. Users are supposed to write in lots of stuff, as in "enter names, each one from new line".
I do use jQuery anyway so if they made some simpler solution for this it would be perfect.
What you are looking for is called Zebra striping, maybe that will help with some google searching. However, I don't think there is a way to currently do this to text within a textarea (besides using the background image hack).
CSS3 has a lot of powerful features such as the nth-child psuedo class. There might be a way to do it using that, but again, it probably has no way to do that within a text area.
Perhaps another solution would be to do something like SO does -- where you enter text into a textarea and then next to it or below it it shows a nicely formatted version. You would use jquery to parse the text in real time and display it zebra striped.
Edit: I had another idea that might work, but would take some experimenting. There is probably a way using jquery to get the absolute position of each line of text in the text area. I would think you could at least get the absolute position of the top left of the textarea, get the line height of the text, multiply by the number of rows down (number of linebreaks in the text), test and tweak a little, and you should be able to get the position of each line in the text area. Then, use jquery to draw a colored div behind the text area for each line of text that is as wide as the textarea and as tall as the line of text. The textarea should be transparent as well.
With a little more work, you can probably even have the zebra striping logic be smart enough to detect if the line of text has wrapped, so that zebra stripe can be 2 or more lines tall.
Might work. Good luck!
One way to accomplish this would be to just use a background in the textarea.
<style type="text/css">
textarea { background-image: url(bg.png); }
</style>
That being said, you'd have to have to play around with the tiling and the line-height to get it just right, but it should be able to accomplish what you're looking for without the use of scripting.
If you wanted to make the actual text different colors, there's no way to do this using a pure <textarea>. You could use a rich text editor such as TinyMCE, but that would be way too overkill in my opinion.