CSS 텍스트 줄 바꿈 속성 탐색: 단어 줄 바꿈 및 하이픈

CSS 텍스트 줄 바꿈 속성 탐색: 단어 줄 바꿈 및 하이픈

웹 디자인에서 텍스트 줄 바꿈은 중요한 문제입니다. 텍스트가 컨테이너 너비를 초과하는 경우 콘텐츠의 가독성과 심미성을 보장하기 위해 적절한 줄 바꿈 방법을 선택해야 합니다. 이 기사에서는 CSS에서 일반적으로 사용되는 두 가지 속성인 단어 줄 바꿈과 하이픈을 소개하고 해당 속성의 사용법과 효과를 설명하는 특정 코드 예제를 제공합니다.

1. word-wrap 속성

word-wrap 속성은 줄바꿈 시 텍스트가 처리되는 방식을 지정하는 데 사용됩니다. 여기에는 일반 및 중단 단어라는 두 가지 선택적 값이 있습니다.

• normal: 기본값입니다. 텍스트가 컨테이너 너비를 초과하면 단어 사이에 줄이 배치되고, 단어가 한 줄에 모두 들어갈 수 없을 정도로 길면 다음 줄로 오버플로됩니다.

샘플 코드:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.normal-text {
  word-wrap: normal;
}
</style>

<div class="container">
  <p class="normal-text">这是一段很长很长很长很长很长很长的文本。</p>
</div>

효과: 컨테이너 너비는 200px이며, 텍스트가 컨테이너 너비를 초과하면 단어 사이에 줄 바꿈이 수행됩니다.

• break-word: 텍스트가 컨테이너 너비를 초과하면 단어 중간에 줄 바꿈 문자가 없더라도 단어 내부에서 끊어집니다.

샘플 코드:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.break-word {
  word-wrap: break-word;
}
</style>

<div class="container">
  <p class="break-word">这是一段很长很长很长很长很长很长的文本。</p>
</div>

효과: 컨테이너 너비는 200px이며, 텍스트가 컨테이너 너비를 초과하면 단어 안에 줄바꿈됩니다.

2. hyphens 속성

hyphens 속성은 다양한 언어 및 텍스트 레이아웃 요구 사항에 맞게 하이픈 사용을 제어하는 ​​데 사용됩니다. 없음, 수동 및 자동의 세 가지 선택 값이 있습니다.

• 없음: 기본값입니다. 하이픈이 없으면 필요할 때 텍스트가 바로 줄 바꿈됩니다.

샘플 코드:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.no-hyphens {
  hyphens: none;
}
</style>

<div class="container">
  <p class="no-hyphens">这是一个没有连字符的例子。这个长长长长的单词不会被自动断行，而是直接溢出到下一行。Hyphens are not used in this example, so the long word will overflow to the next line instead of being automatically broken.</p>
</div>

효과: 컨테이너 너비는 200px이며, 텍스트가 컨테이너 너비를 초과하면 단어가 바로 다음 줄로 오버플로됩니다.

• 수동: 수동 하이픈 넣기, 언어의 하이픈 넣기 규칙에 따라 하이픈을 수동으로 추가합니다.

샘플 코드:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.manual-hyphens {
  hyphens: manual;
}
</style>

<div class="container">
  <p class="manual-hyphens">这是一个使用手动断字的例子。这个长长长长的单词被手动添加了连字符，使其在需要换行时正确断行显示。</p>
</div>

효과: 컨테이너 너비는 200px이며, 텍스트가 컨테이너 너비를 초과하면 언어의 하이픈 규칙에 따라 단어가 줄 바꿈과 함께 올바르게 표시됩니다.

• auto: 언어의 하이픈 넣기 규칙에 따라 하이픈을 자동으로 추가합니다.

샘플 코드:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.auto-hyphens {
  hyphens: auto;
}
</style>

<div class="container">
  <p class="auto-hyphens">这是一个使用自动断字的例子。这个长长长长的单词会根据语言的断字规则自动添加连字符，使其在需要换行时正确断行显示。</p>
</div>

효과: 컨테이너 너비는 200px이며, 텍스트가 컨테이너 너비를 초과하면 언어의 하이픈 규칙에 따라 단어가 줄 바꿈과 함께 올바르게 표시됩니다.

요약:

두 가지 CSS 속성 word-wrap과 하이픈을 사용하면 텍스트 줄 바꿈을 더욱 세밀하게 제어할 수 있습니다. word-wrap 속성은 줄 바꿈 방법을 지정하는 데 사용되며, 단어 사이 또는 단어 내에서 줄 바꿈을 선택할 수 있습니다. 하이픈을 수동으로 추가하거나 자동으로 하이픈을 추가합니다. 실제 웹 디자인에서는 텍스트의 특성과 언어 요구 사항에 따라 적절한 속성 값을 선택하여 더 나은 가독성과 조판 효과를 얻을 수 있습니다.

위 내용은 CSS 텍스트 줄 바꿈 속성 탐색: 단어 줄 바꿈 및 하이픈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!