html (+ css) : 줄 바꿈을위한 선호 위치 표시
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 인 공백 문자​ 를 사용하는 것입니다 . 특정 지점에서 단어 내부에 브레이크 스페이스 를 만드는 데 사용됩니다 .
Does the exact opposite of the non-breaking space (well, actually the word-joiner ⁠)(word-joiner is the zero-width version of non-breaking space)
(there are also other non breaking codes like the non-breaking hyphen ‑)(here is an extensive answer on different 'variants' of nbsp)
If you want an HTML-only (no CSS/JS) solution you could use a combination of the zero-width space and the non-breaking space, however this would be really messy, and writing a human-readable version requires a little effort.
ctrl + c, ctrl + v helps
example:
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
unreadable? this is the same HTML with no comment tags:
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
However, since email html rendering is not completely standardized, its good for that kind of use since this solution uses no CSS/JS
Also, if you use this in combination with any of the <span>-based solutions, you will have complete control of the line-breaking algorithm
(editorial note:)
The only problem I could see you having is if you wanted to change the points of preferred breakage dynamically. This would require constant JS manipulation of each of the spans proportionate size, and having to handle those HTML entities in the text.
The answer is no (You cannot alter the line breaking algorithm used).
But there are some workarounds (best one is the accepted answer)
You can go near with the non-breaking-space but only between words that go together (what you have in spans, but not after the comma ), or you can use the white-space:nowrap as @Marcel mentioned.
Both solutions do the same thing, and both will not break a group of words if it does not fit on its own.
With your mark-up above use span { white-space:nowrap }. It's as good as you can expect really.
New answer now we have HTML5:
HTML5 introduces the <wbr> tag. (It stands for Word Break Opportunity.)
Adding a <wbr> tells the browser to break there before anywhere else, so it's easy to make words break after commas:
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 Jacks
It is supported my all major browsers apart from IE.
You can just adjust the margin settings in CSS (margin-right in this case).
text {
margin-right: 20%;
}
Use <div> instead of <span>, or specify a class for SPAN and give it the display:block attribute.
There’s an HTML element for that™: the (now standardized) <wbr> element.
I’d advise you to use that. It may not work everywhere, but it’s the best you can do without going through hoops.
참고URL : https://stackoverflow.com/questions/5392853/html-css-denoting-a-preferred-place-for-a-line-break
'programing' 카테고리의 다른 글
| 복사와 복제의 차이점은 무엇입니까? (0) | 2020.08.19 |
|---|---|
| 스칼라 유형 프로그래밍 리소스 (0) | 2020.08.19 |
| xlsm 또는 xlsb 형식은 언제 사용해야합니까? (0) | 2020.08.19 |
| DateTime 객체 반올림 (0) | 2020.08.19 |
| 지도의 주요 부분에 변수를 사용하는 방법 (0) | 2020.08.19 |