CSS를 사용하여 둥근 Div 주위에 텍스트 줄 바꿈을 만드는 방법은 무엇입니까?

CSS를 사용하여 둥근 div 안에 텍스트를 유지하는 방법

이 질문에서 사용자는 제공된 이미지에서 볼 수 있듯이 내부에 텍스트가 포함된 둥근 div를 원했습니다. . 그러나 사용자의 둥근 div의 텍스트는 사각형으로 표시되었습니다.

CSS 사용

CSS를 사용하여 원하는 효과를 얻으려면 사용자는 다음 옵션을 고려할 수 있습니다.

1. 외부 모양 활용

이 속성을 사용하면 직사각형이 아닌 모양 주위에 인라인 콘텐츠 래핑을 사용자 정의할 수 있습니다. Mozilla Developer Network 문서에 언급된 바와 같이 우수한 브라우저 지원을 갖춘 최신 솔루션입니다.

2. 배경 그라데이션으로 도형 만들기

원형 div의 경우 방사형 그라데이션 섹션을 만들어 텍스트가 둘러싸도록 만들 수 있습니다. 예는 다음과 같습니다.

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div[class]:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient(circle at bottom right, transparent 69%, red 69%);
}

div[class][id]:before {
  background: radial-gradient(circle at top right, transparent 69%, red 69%);
}

div[class]:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient(circle at bottom left, transparent 69%, red 69%);
}

div[class][id]:after {
  background: radial-gradient(circle at top left, transparent 69%, red 69%);
}

위 내용은 CSS를 사용하여 둥근 Div 주위에 텍스트 줄 바꿈을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!