I have a string of some markdown text in it ("**Bold** *Italic*") and I need it to be rendered in React. This itself is simple enough, I can just use the react-markdown module and voila.
I need the text to only span 1 line, if more than that then it should be truncated with an ellipsis. For this on its own I would use react-truncate.
The problem is that when I combine the use of these 2 modules, all of the markdown formatting (bold and italics) is gone. It just renders as plain text in a span.
How do I render markdown whilst truncating it in React?
This is my code so far:
<Truncate lines={1}>
<ReactMarkdown source={"**Bold** *Italic*"} />
</Truncate>
If it's one line, Trauncuate might be an overkill, i suggest a css solution :
#test{
width: 300px;
padding: 10px;
border: 1px solid #aaa;
resize: both;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div id="test" >
Hello world <b>Hello world</b> Hello world <i>Hello world</i> Hello world <b>Hello world</b>
</div>
Related
Is it possible to show a tooltip when the content can't fit inside the element? Using title attribute shows the tooltip regardless.
I've googled some examples, but there was nothing about tooltip showing conditions.
In this example I want to see the tooltip only when the text is too long:
.limiter
{
width: 100px;
}
.container
{
margin: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
<div class="limiter">
<div>Hover cells:</div>
<div class="container" title="short text">short text</div>
<div class="container" title="short">short</div>
<div class="container" title="long text long text long text">long text long text long text</div>
</div>
It is possible to use JavaScript.
Limitations:
I don't know in advance, what text a cell will contain (basically it's a template for angularjs)
I don't know in advance, what number of letters can it display
User can resize cells
I'm working on a map legend and I have some trouble when the word is too long.
I want to know if it's possible to add some property to the text so it break to the last symbol space, score, underscore, slash, and other punctuation
In other words, I want more symbols to be interpret like spaces for the "default spaces breakline".
I try using word-wrap: break-word or word-break: break-all but it's not the expected result... It is what I want only if there is no symbol so I'll probably add 1 of these to the CSS to break lines (by the way I'm not sure about the differences / wich one to use / why)
Here's an example of what I would like (and what I tried)
http://jsfiddle.net/uazk54pL/
edit
by the way, I didn't use JavaScript because I thought it can be with css, and I'm not really sure how to do it... but I'm not against using it if no better solution is found
.tmp {
border: black 1px solid;
width: 100px;
margin: 5px;
}
#wrap {
word-wrap: break-word;
}
#break {
word-break: break-all;
}
}
nothing
<div id="nothing" class="tmp">
hi im/a-longword
<br/>
<br/>breaklineon-and_and and/
<br/>
<br/>ifnosymboliwantwordbreak
</div>
word-wrap: break-word;
<div id="wrap" class="tmp">
hi im/a-longword
<br/>
<br/>breaklineon-and_and and/
<br/>
<br/>ifnosymboliwantwordbreak
</div>
word-break: break-all;
<div id="break" class="tmp">
hi im/a-longword
<br/>
<br/>breaklineon-and_and and/
<br/>
<br/>ifnosymboliwantwordbreak
</div>
expected
<div id="expected" class="tmp">
hi im/a-
<br/>longword
<br/>
<br/>breaklineon-
<br/>and_and and/
<br/>
<br/>ifnosymboli
<br/>wantwordbr
<br/>eak
</div>
I finally used the method tell in the question's comments. As my text is add with JavaScript, I'm just addind after special characters before add it to my page.
str.replace(/([-/_])/g,"$& ")
Also I used the CSS word-wrap:break-word; to cut words too long
I have updated css in your example. Take a look, if this is what you are trying to do.
http://jsfiddle.net/uazk54pL/1/
The CSS looks like this:
.tmp {
border:black 1px solid;
width:100px;
margin:5px;
position:relative;
word-wrap: break-word;
}
Hello there I have an application that shows data in a grid fashion here is one of the "blocks" out of the grid below. Within the Divs that fill out data from a JSON file and fills the divs.
The data is limited to 4 characters (a number between 0 and 9999) for all the items. However when there is 1 character in there it looks too small because i have to keep the font size fairly small so when there is more than 1000 it doesn't overflow.
My question is what would be the best way to automatically adjust the font size for each div independently so that it always fit's at a maximum size
<div class="box">
<div class="Top">ZW01025</div>
<div id="ZW01025" class="Midbox">
</div>
<div id="ZW01025b" class="Midbox">
</div>
<div id ="ZW01025C" class="BottomboxPercent">
</div>
<div id ="ZW01025D" class="BottomboxPercent">
</div>
<div id ="ZW01025p" class="Bottombox">
</div>
</div>
He is a fiddle of the full thing, it doesn't really fit in Js fiddle well http://jsfiddle.net/RYU54/3/
If you are ok with using a JavaScript solution I would check out flowtype.js
http://simplefocus.com/flowtype/
Add font size in the .Top css class, lik this:
.Top{
height: 20%;
width: 90%;
margin: 1px auto;
background-color: #596163;
text-align: center;
color: white;
font-size: 30px; /* added */
font-size: 3.5vw; /* added */
...
}
I made a script to automatically scale text to fit the surrounding div, it should work in your case:
https://github.com/jeremiahrose/perfectFit.js
Hello again dearest Experts,
I am still having issues getting tooltips to work correctly.
The code below works correctly as far displaying the tooltips.
The big issue is that it expands the textbox, making other textboxes lose alignment.
What we would like to is to have the message in the tooltop hover on top of the textbox but not obscure it. This way, users can still type into it.
Can the code I have below be modified to help me accomplish this?
Many thanks.
THe css
<style type="text/css">
div.activeToolTip
{
display:block;
visibility:visible;
background-color:#A1D40A;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
line-height: 1.50em;
font-weight:bold;
color: #fff;
border:1px solid black;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
width:200px;
height:70px;
}
div.idleToolTip
{
display:none;
visibility:hidden;
}
Then textbox and tooltip.
<asp:TableCell><asp:TextBox ID="instruct" onmouseover="document.getElementById('toolTipDiv').className='activeToolTip'" onmouseout="document.getElementById('toolTipDiv').className='idleToolTip'" runat="server" Width="75px"></asp:TextBox>
<div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>
The key is to make your tooltip position: absolute. This way you'll have exact control over where it appears and it won't affect the layout of any other elements.
The other thing you should do it put it in an element with position: relative set:
<div class="relative">
<input type="text" />
<div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>
</div>
This will create the coordinate system for it (i.e.: bottom: 20px will translate to 20px from the bottom of the relative parent):
.relative {
position: relative;
}
#toolTipDiv {
position: absolute;
bottom: 20px;
left: 0;
}
Here's a demo of it in action.
I recommend you use a jQuery plugin, there are tons of them:
30 Stylish jQuery Tooltip Plugins For Catchy Designs
edit: sorry, that was a complete brain fart. I need more sleep. display:absolute won't do anything, it's position:absolute
Can you show the problem in the jsfiddle?
Direct question - How would I place certain objects or small text within a certain area. For example, how would I replace the following image with html/javascript.
--- I don't have enough reps to post an image :/ but try this URL - http://i.stack.imgur.com/a3eWL.jpg
Big picture - I am trying to create a kml file for Google Earth that when the point is clicked, the balloon description window pops up and I can display my html formatted diagram showing where the satellites are at that instant. Google Earth and KML docs allow for pretty much any html formatting within it, so currently looking for a good way to do this.
Disclaimer: It has been a few years since i have done any html or javascript editing, so general examples and insight is greatful.
Thanks
You can just create some absolute positioned <div>s that you move with their top and left CSS properties.
A quick example here: http://jsfiddle.net/94Kzt/ (note: I used JQuery to do it quickly, but it is easy to modify it to use standard JS DOM manipulation calls)
Essentially the below section is what I did.
<div style="display: block; position: relative; width: 300px; height: 300px; border: 1px solid black; background: gray;">
<div style="position:absolute; width: 296px;height: 296px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 148px; border-radius: 148px;"></div>
<div style="position:absolute; width: 148px;height: 148px;top: 72px;left: 72px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 75px;border-radius: 75px;"></div>
<div style="position:absolute; width: 4px; height: 4px;top:148px; left:148px; background-color: black;"></div>
<div style="position: absolute; font-size: 0.8em; color: #222222; top: %dpx; left: %dpx;">%d</div>
</div>
The last div are the labels that are placed wherever. The %d are integer values (from my python code)
In addition, here is the working example. Props to nico
http://jsfiddle.net/94Kzt/72/