I don't find the word-wrap: break-word; rule too pleasant in the eyes in certain situations because it tends to break long strings in the wrong places given the right condition.
It produces something like this:
|--- DIV ---|
| |
| English/S |
| panish |
| |
|-----------|
instead of
|--- DIV ---|
| |
| English/ |
| Spanish |
| |
|-----------|
Is there a way for me to fine-tune my CSS rules so that it tries to break words through symbols first before breaking the actual words? If so, how do I do it?
I think the only way to achieve such behavior is by using <wbr>(mdn link) in your markup at the position you wish to cause the word break.
Have a look:
.word-box{
width:100px;
margin:5em;
border:1px solid #606266;
}
<div id='break-wbr' class='word-box'>
English/<wbr>Spanish
</div>
It's also well supported.
Another way to break at a position would be by using shy hyphens ( )
.word-box{
width:100px;
margin:5em;
border:1px solid #606266;
}
<div id='break-shy' class='word-box' lang='en'>
English/Spanish
</div>
but the downside of using shy hyphens is that it inserts a visible hyphen at the point of word break.
You can also have a look at a very similar and more detailed answer here.
Try adding this.
word-break: keep-all;
Related
setting up documentation for a plugin.
Can you add tables within a dd tag?
I tried the code below but it wont output as a table I tried with the double space line break technique but nothing either
This doesnt parse the table and just leaves the table syntax as is
Term
: definition
: | Table cell | Table cel | Table cell |
This wont render (note there are two spaces after definition)
Term
: definition
| Table cell | Table cel | Table cell |
my goal is this:
<dl>
<dt>Term</dt>
<dd>
definition
<table>
<!-- table rows and cells here -->
</table>
</dd>
</dl>
Depending on the Markdown implementation you are using either you can't or you need to do three things:
(1) Wrap your table with blank lines
A table is a block level element, just like a paragraph is. Therefore, it needs to be on a line by itself. To accomplish that, you need to include a blank line before the table. There is no need to add two spaces to the preceding line as the blank line already separates the elements and each block-level element will always be on its own line (barring some non-standard CSS which changes that behavior) .
(2) Indent your table
Of course, when you are nesting block level elements inside a list item and those elements do not start in the first line of the list item, you must indent those elements by one level to indicate they are nested. Therefore, the table must be indented by four spaces or one tab.
(3) Add a table header
Except for Kramdown, all implementations which support tables (that I am aware of) require the table to include a header. Otherwise, they do not recognize it as a table.
Example
Try this:
Term
: definition
| Header 1 | Header 2 | Header 3 |
| ---------- | --------- | ---------- |
| Table cell | Table cel | Table cell |
That said, both definition lists and tables are non-standard Markdown and their behavior varies among implementations which support them (not all do). Therefore, YMMV.
In fact, Babelmark demonstrates that the above works for Pandoc, RDiscount, PHP Markdown Extra, and MultiMarkdown (strangely version 5, but not version 6). Note that a few other implementations likely would work as well if they were properly configured. Babelmark only demonstrates default behavior for each implementation.
I am trying to write a bullet list in markdown table, however I am unable to do so. I tried the solutions given here, and here.
I am writing the following table in bitbuckets readme.md file.
| **Date** | **A** | **B**
|:----------:|:-----:|:------:
| 2016 | Something | <ul><li>A</li><li>B</li><li>C</li></ul>
Every row of column B contains a bullet list of 2 items.
How can I achieve this ? What am I missing ? Please let me know. Thanks in advance.
I used the answer given by #Dorgrin in the post mentioned as a possible duplicate. Even while using that I was not able to get a list displayed. What I was shown was html code as plain text in the third column which is not the intended effect.
Bitbucket is lagging behind on supported features. Apparently they allow html in markdown README files, but they decided not to support it in snippets.
I say "apparently" because I just tried it, and it doesn't even work. See this repo.
I decided to ask them a question about this. You can follow further developments here
On a more positive note, what you had works well on Github as you can see here:
| **Date** | **A** | **B**
|:----------:|:-----:|:------:
| 2016 | Something | <ul><li>A</li><li>B</li></ul><ul><li>C</li></ul> |
<script src="https://gist.github.com/smac89/bc0ff6c7e41396293367b00df626317b.js"></script>
You can mimic the visual affect of a bulleted lists in a markdown table with the ascii character • and the <br> tag for a line break.
| | Apples | Oranges |
|-----------|--------|---------|
|attributes | • color: red <br> • shape: round | • color: orange <br> • shape: round |
|tasty | yes | yes |
Renders like this
I think this keeps the table clean of the html clutter from using the <li> and <ol>/<ul> tags.
I have made no secret of my disdain for BBCode and support for more readable text-to-HTML converters like Markdown, which is what SO uses. "Canonical" Markdown however doesn't have a syntax to define tables. So, I am trying to come up with an extension that does just that.
Above all, it should be easy to read and write. Of course it also shouldn't be conflict with existing Markdown syntax. PHP Markdown has syntax for tables that looks like:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
For some reason, this strikes me as "not enough enough" (mainly because it looks a little too verbose). Does anyone know of a Markdown dialect with a nicer syntax? You are welcome to write your own as well.
Bonus points if it's not extraordinarily difficult to parse but still flexible enough to handle alignments (horizontal and vertical), table headers and possibly colspan and rowspan.
I like Textile's table syntax. It looks like:
|_. a header cell |_. another header |
|_. one more header |=. centered cell |
| regular cell |>. right-aligned cell |
The parser doesn't care about whitespace. This syntax is flexible and avoids the rigidity of syntaxes (like yours, Reddit's, etc.) requiring a "separator" line between a single header row and the rest of the table.
I am learning flex and have written a little app with a TextArea that had data getting populated dynamically by embedding simple HTML (mostly for font styles)
I ran into a weird issue when I wanted to include images, the images in this case are small arrows as in reddit.com. My desired aligmnent is,
-------------
o | foo bar
| ffdfdfdf
| fdfd
-------------
o | dfdd
-------------
Where o in the first column is an image. Note that the borders are invisible.
I just used a simple <Table></table> and works perfectly if I view the resulting HTML in a browser. However flash renders the table in a very screwed manner, I get something like this instead
--------------
o fooooooo
ffffdfdf
fdfd
-------------
o fff
--------------
If the second line has more than one line, the subsequent lines wrap around the first column. Is this a known problem?
Flash's (and hence Flex's) htmlText doesn't officially support tables to begin with.
Use a Datagrid instead.
A character is a space which doesn't allow for line breaking.
<p>lorem ipsum here are some words and so on</p>
| lorem ipsum |
| here are some words and so |
| on |
What's the opposite of that? That is, a character which is NOT rendered as a space, but CAN be used for line breaking.
<p>foo supercalifragilisticexpialidocious bar</p>
<!-- put char here ^ and here ^ -->
|foo supercalifragi |
|listicexpiali |
|docious bar |
or with wider size:
|foo supercalifragilisticexpiali |
|docious bar |
I'm aware of the soft-hyphen character, but for my purposes, I specifically do not want a hyphen added at the break.
You want the unicode character ZERO-WIDTH SPACE (\u200B).
You can get it in HTML with or .
Explicit breaks and non-breaks:
LB7 : Do not break before spaces or zero width space.
LB8 : Break before any character following a zero-width space, even if one or more spaces intervene.
http://unicode.org/reports/tr14/
There also is the little-known wbr tag, which lets the browser to decide whether to break the line or not.
There's a nice page over at quirksmode.org that answers this question quite nicely IMHO. http://www.quirksmode.org/oddsandends/wbr.html
In short: use <wbr /> or (or but you mentioned you don't want the dash).
use <wbr>.
You can use CSS3 property called word-wrap
p.test {word-wrap:break-word;}
Hope it helps!
theres a lot of discussion about this but it has become more or less standard to use