Как я могу убедиться, что текст находится внутри закругленного div?

Я хочу, чтобы мой круглый div содержал текст внутри него. как вы видите на изображении Round div with text inline

Как это сделать с помощью CSS? потому что мой круглый div, будет иметь текст, похожий на квадрат. http://jsfiddle.net/kUJq8/

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

Ответы

Ответ 1

Я создал пример того, как вы можете это достичь. Пока еще нелегко, но это произойдет в ближайшем будущем, как упомянул Спадли. http://jsfiddle.net/kUJq8/5/

Этот пример основан на том же понятии, который используется http://www.csstextwrap.com, но я создал этот пример, чтобы объяснить, что происходит и как это сделать эффект.

В принципе, вам нужно сначала создать свой круг и некоторый образец текста, а затем создать набор "воображаемых" плавающих div, чтобы ваши текстовые рекомендации не превышали и автоматически переносились на следующую строку. Не стесняйтесь играть с шириной div, чтобы вы могли добиться желаемого эффекта. Кроме того, если вы удаляете границу, вы можете увидеть, как выглядит текст. Граница помогает при настройке ширины div.

<div style="float:left;clear:left;height:15px;width:130px"></div>
<div style="float:right;clear:right;height:15px;width:130px"></div>

В моем примере я не создал весь круг, но этого должно быть достаточно, чтобы вы шли по правильному пути. Пожалуйста, дайте мне знать, если вам нужна дальнейшая помощь в этой идее. Спасибо.

Ответ 2

В настоящее время стандартизируется функция CSS, называемая "Шаблоны CSS".

(NB: "CSS Shapes" - это имя спецификации спецификации CSS, а не просто путайте с просто созданием непрямоугольной формы в CSS, которую вы уже сделали)

Функция CSS Shapes будет делать именно то, о чем вы просите, то есть вы можете указать форму элемента в отношении того, как текст внутри (и/или за его пределами) должен быть завершен.

Вы можете узнать больше об этом в различных статьях по всему Интернету. Вот несколько советов, которые вы можете прочитать:

Вы также можете прочитать документ спецификации W3C: http://dev.w3.org/csswg/css-shapes/

Однако (и это большой "однако" ), эта функция пока недоступна в браузерах. Он все еще находится в процессе прохождения процесса спецификации и имеет очень ограниченную поддержку браузера.

В то же время то, что вы просите, на самом деле очень сложно достичь. Вы можете быть вынуждены прибегнуть к тому, чтобы наклеить кучу спейсерных элементов вокруг области, в которой вы хотите заставить текст обтекать их. Не идеально, но пока эта новая спецификация не станет широко поддерживаемой в браузерах, она, вероятно, будет так же хороша, как и для вас.

Ответ 3

В настоящее время можно выбрать shape-outside:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

Свойство shape-outside CSS определяет фигуру (которая может быть непрямоугольной), вокруг которой должен обтекать смежный встроенный контент. По умолчанию встроенный контент оборачивается вокруг поля поля; shape-outside предоставляет возможность настроить это обтекание, позволяя оборачивать текст вокруг сложных объектов, а не простых блоков.

изображение или градиент могут быть использованы для рисования фигуры, чтобы держать текст подальше от.

Для круга необходимы 4 штуки, которые можно изготовить из псевдоэлементов.

  • Идея состоит в том, чтобы начать с квадратного прямоугольника размером с 4 плавающих псевдо с радиально-градиентным фоном, нарисованным вне круга/центра.

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%);
}


/* extra */

html {
  display: flex;
  height: 100%;
}

body {
  background: #399;
  margin: auto;
}
<div>
  <div class=shape></div>
  <div class=shape id=idAttribute></div>
</div>

Ответ 4

Я не уверен, насколько это надежное решение, но его легко реализовать, и у них есть проверенный пример текста по кругу. Проверьте: CSS-обтекание текста

Ответ 5

вы также можете добавить <span> -Element bevor соответствующую строку с разными отступами; это то, как я сделал (имел div с закругленным нижним левым углом и текст был переполнен с этой стороны)

css в голове или таблице стилей:
#indent5 {padding: 0 0 0 5px;}
#indent20 {padding: 0 0 0 20px;}

html в теле:
<div style="text-align: justify;">
<p> f&uuml;hrte und ihren ungl&uuml;ckseligen Sohn Ignatius, der schnell wieder wegen seines Dementoren&#8211;Zuchtprogramms<br>
<span id="indent5">seinen Posten verlassen musste. Besonders Wilhelmina</span><br>
<span id="indent20">Tuft war oft hier und brachte die Leute in </span><br>
</p>
</div>

в общем случае текст является блоком, но последние две строки имеют отступ в 5 и 20 пикселей соответственно; вам все равно придется делать это для каждой отдельной строки, но я ожидаю, что это будет проще, чем размещение div-элементов

Ответ 6

Вы можете попробовать использовать переполнение: hidden;