table-cell でレイアウトしたいとき

なんとなくやってみる場合

test1.html
<html>
<head>
  <link type="text/css" href="./test1.css" rel="stylesheet">
</head>
<body>
<div class="m">
  <span class="l">aaaaaaaaaaa</span>
  <span class="r">
    <span class="c1">bbbb</span>
    <span class="c2">ccccc</span>
  </span>
</body>
</html>
test2.css
div.m {
  width: 200px;
  border: 2px solid;
	display: table;
}

div.m span.l {
  display: table-cell;
}

div.m span.r {
  display: table-cell;
	text-align: right;
}

div.m span.r span.c1 {
  background-color: red;
}

div.m span.r span.c2 {
  background-color: blue;
}

右のセルの文字数を増やしてみると

右カラムが改行されちゃう。

こんな風に折り返すのは左にしたい


test1.html
<html>
<head>
  <link type="text/css" href="./test1.css" rel="stylesheet">
</head>
<body>
<div class="m">
	<span style="display: table-row;">
  		<span class="l">ああああああああ</span>
  		<span class="r">
    		<span class="c1">いいいい</span>
    		<span class="c2">ううう</span>
		</span>
  	</span>
</body>
</html>
test1.css
div.m {
  width: 200px;
  border: 2px solid;
	display: table;
}

div.m span.l {
  display: table-cell;
}

div.m span.r {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
}

div.m span.r span.c1 {
  background-color: red;
}

div.m span.r span.c2 {
  background-color: blue;
}

日本語だとこのように、
white-space: nowrap;
でうまくいく。


参考：css - How to Auto resize HTML table cell to fit the text size - Stack Overflow

でも英語だと、、、


おなじCSSなのに横幅が勝手に伸びよる........

まとめ

日本語とかimgタグだけをいれるときとだけとかのときは問題ないように感じたけど、
英文字が入るときは、あやしいなぁ......
こういうことしたいときの「ずばり解決策」ってないのかな。

追記

word-wrap : break-word;
使えば、最近のブラウザだと伸びないっぽい気がしてきた。