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 동작이 내가 원하는 것처럼 보이지만 제대로 작동하지 않는 것 같습니다.
답변
사용하여
span.avoidwrap { display:inline-block; }함께 보관하고 싶은 텍스트를 감싸서
<span class="avoidwrap"> Text </span>먼저 선호하는 블록으로 래핑 한 다음 필요에 따라 더 작은 조각으로 래핑합니다.
답변
내가 선호하는 Dan Mall 의 매우 깔끔한 RWD 솔루션이 있습니다 . 반응 형 줄 바꿈에 관한 다른 질문이이 질문의 중복으로 표시되기 때문에 여기에 추가하겠습니다.
귀하의 경우에는 다음이 필요합니다.
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>미디어 쿼리의 CSS 한 줄 :
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}답변
쉬운 대답은 너비 가 0 인 공백 문자​ 를 사용하는 것입니다 . 특정 지점에서 단어 내부에 공백 을 만드는 데 사용됩니다. . .
않는 정반대 의 비 깨는 공간 (물론, 실제로 단어 목공 ⁠ () 단어 목공은 의 제로 폭 버전 비 분리 공간 )
(브레이킹 되지 않는 하이픈 과 같은 다른 non – breaking 코드도 있습니다 ‑) (여기 nbsp의 다양한 ‘변형’에 대한 광범위한 답변이 있습니다. )
HTML 전용 (CSS / JS 없음) 솔루션을 원하면 너비 가 0 인 공간 과 끊기지 않는 공백 의 조합을 사용할 수 있지만 이것은 정말 지저분 할 것입니다. 하며 사람이 읽을 수있는 버전을 작성하려면 약간의 노력이 필요합니다. .
ctrl+ c, ctrl+v 도움
예:
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입니다.
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 렌더링은 완전히 표준화되지 않았기 때문에이 솔루션은 CSS / JS를 하지 않기
또한이를 <span>기반 솔루션 과 함께 사용 하면 줄 바꿈 알고리즘을 완전히 제어 할 수 있습니다.
(편집 참고 🙂
내가 볼 수있는 유일한 문제는 선호하는 파손 지점을 동적으로 변경하려는 경우입니다. 이를 위해서는 각 범위에 비례하는 크기의 JS를 지속적으로 조작하고 텍스트에서 해당 HTML 엔티티를 처리해야합니다.
답변
대답은 아니오입니다 ( 사용 된 줄 바꿈 알고리즘은 변경할 수 없습니다 ).
그러나 몇 가지 해결 방법이 있습니다 ( 가장 좋은 방법 은 허용되는 답변입니다 )
구분되지 않는 공백으로 가까이 갈 수 있지만 함께 연결되는 단어 사이에서만 ( 스팬에 있지만 쉼표 뒤에있는 것은 아님 ) 또는 white-space:nowrap@Marcel이 언급 한대로 사용할 수 있습니다 .
두 솔루션 모두 동일한 작업을 수행 하며 자체적으로 맞지 않으면 둘 다 단어 그룹을 끊지 않습니다.
답변
위의 마크 업과 함께 span { white-space:nowrap }. 정말 기대할 수있는만큼 좋습니다.
답변
이제 새로운 답변에 HTML5가 있습니다.
HTML5는 <wbr> 태그를 . (단어 나누기 기회를 의미합니다.)
를 추가 <wbr>하면 브라우저가 다른 곳보다 먼저 나누 도록 지시하므로 쉼표 뒤에서 단어를 나누는 것이 쉽습니다.
Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple JacksIE를 제외한 모든 주요 브라우저에서 지원됩니다.
답변
CSS에서 여백 설정을 조정할 수 있습니다 (이 경우 여백 오른쪽).
text {
margin-right: 20%;
}