HTML 표 셀에 표시하려는 텍스트가 있다고 가정 해 보겠습니다.
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks그리고 나는 쉼표 중 하나 다음에 우선적으로 줄을 나누기를 원합니다.
HTML 렌더러에게 지정된 지점에서 중단을 시도하고 중단 되지 않는 공백 을 사용하지 않고 공백 중 하나를 중단하기 전에 먼저 중단하도록 지시하는 방법이 있습니까? 나누지 않는 공백을 사용하면 무조건 너비가 커집니다. 내가 원하는 라인 배치 알고리즘은 먼저 쉼표로 그것을 시도하고 맞게 라인을 얻을 수없는 경우 줄 바꿈, 공간의 한 이후에 발생할 수 있습니다.
<span>요소 에서 텍스트 조각을 래핑하려고 시도했지만 도움이되지 않는 것 같습니다.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>참고 : CSS3text-wrap: avoid 동작이 내가 원하는 것처럼 보이지만 제대로 작동하지 않는 것 같습니다.
스팬 내부에 비 분리 공백을 사용할 수 있습니다 .
—
Gabriele Petrioli 2011 년
그러나 나는 깨지지 않는 공백 을 사용하고 싶지 않습니다 . 나는 "여기에서 깨고 싶지는 않지만, 내가해야 할 일이 있다면"공간을 사용하고 싶지만, 내가 아는 한 그것들이 존재한다.
—
Jason S
@Jason .. 나는 당신을 느낍니다 .. 그러나 그것은 불가능합니다 .. 대답을 추가했습니다.
—
Gabriele Petrioli 2011 년
drat, 컴퓨터 과학자가 타이포 그래퍼의 입력없이 렌더링 알고리즘을 작성할 때 일어나는 일입니다.
—
Jason S
@ EggertJóhannesson의 답변은 좋은 해결 방법을 제공하므로 수락해야합니다!
—
Gabriele Petrioli 2014 년