Замостить текст в овальную область JS | CSS

Question

Существует ли свойство в CSS или JS, которое позволит замостить текст в овальную область?

.tmp{
    width: 300px;
    height: 100px;
    padding: 20px 10px;
    font-size: 25px;
    border-radius: 100%;
    border: 1px #f00 solid;
    text-overflow: ellipsis;
}

<div class="tmp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, consequatur.</div>

То есть, если слова не вписываются в область, то происходил бы перенос слов. text-overflow: ellipsis; не помогает.

Answer 1

Свойство text-overflow: ellipsis; работает для текста, а Вы применяете его к блоку. Кроме того, это свойство работает только в том случае, когда у родительского блока overflow установлен в auto, scroll или hidden

Я немного поправил Ваш пример. Посмотрите)

.tmp{
    width: 300px;
    height: auto;
    padding: 20px 10px;
    font-size: 25px;
    border-radius: 100%;
    border: 1px #f00 solid;
    overflow: auto;
    text-align: center;
    
    p {
text-overflow: ellipsis;
}

<div class="tmp"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, consequatur.</p></div>

Answer 2

Вот:

body {
  display: flex;
  align-items: center;
}

:root {
  --size: auto;
  --half-size: calc(var(--size) / 2);
}

.text {
  flex-shrink: 0;
  position: relative;
  width: var(--size);
  max-width: 900px;
  height: var(--size) / 2;
  padding: 50px;
  hyphens: auto;
  text-align: center;
  font-size: 35px;
  line-height: 2;
}

.text:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  border-radius: 50%;
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.25), inset 0 0 15px 0 rgba(0, 0, 0, 0.25);
}

.shape {
  display: block;
  width: 50%;
  height: 100%;
}

.shape__left {
  float: left;
  shape-outside: radial-gradient(var(--size) at right, transparent 50%, black 0);
}

.shape__right {
  float: right;
  shape-outside: radial-gradient(var(--size) at left, transparent 50%, black 0);
}

<div class="text">
  <span class="shape shape__left"></span>
  <span class="shape shape__right"></span>
  <p>Земля – чудесная планета, ее природа разнообразна. Природа нашей планеты – это совокупность каждого элемента: физических естественных и материальных. Природой можно называть только то.</p>
  </p>
</div>

Answer 3

А ещё можно так

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap');
.circle {
  height: 25vw;
  width: 50vw;
  shape-outside: ellipse();
  clip-path: ellipse();
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  pad
}

.content {
  padding: 10px;
  color: white;
  font-size: 26px;
  font-family: 'Montserrat', sans-serif;
}

<div class="circle">
  <div class="content">
    Приветики! Как оно?
  </div>
</div>

И можно даже сделать обтекание!

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap');
body {
  font-family: 'Montserrat', sans-serif;
}

.circle {
  float: left;
  height: 25vw;
  width: 50vw;
  shape-outside: ellipse();
  clip-path: ellipse();
  background: red;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.content {
  padding: 10px;
  color: white;
  font-size: 26px;
}

<div class="circle">
  <div class="content">
    Приветики! Как оно?
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi cupiditate sunt quis sapiente, placeat dignissimos non eligendi odio impedit. Beatae alias quae eveniet quaerat saepe distinctio eius excepturi voluptas.</p>

БЛОГ НА HUSL

Замостить текст в овальную область JS | CSS

Ответы (3 шт):