Question

我不知道如何包装所有文字，而不仅仅是一行，如果您有任何想法如何更改，我将非常感谢您

<h1>I need to change this:</h1>
<div class="hi1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem perspiciatis similique eligendi quas quo reprehenderit ullam. Commodi repellendus distinctio similique voluptate sint debitis est eos minus eaque enim excepturi perspiciatis Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit eveniet consequatur itaque ipsa hic est adipisci pariatur exercitationem mole Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius amet perferendis sint accusamus!stias mollitia debitis quae commodi ut a facilis alias dolorum doloribus!
    </p>
</div>
<h1>to This:</h1>
<div class="hi2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisici Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ipsam eaque consequatur eligendi ullam soluta esse eius sapiente recusandae nostrum. ng Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis odio fuga nisi incidunt.elit. Aliquam expedita praesentium quo ratione? Nisi maxime reprehenderit debitis ex aspernatur itaque voluptate dicta neque vel eos quia repudiandae culpa harum bla bla bla cbla ullam...</p>
</div>
<h1>and this is what happend</h1>
<div class="hi3">
    <p class="p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus expedita ex perspiciatis magni in architecto totam ut nam vel soluta deleniti rerum eos molestiae commodi laborum accusamus culpa? Porro corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia ex fuga quibusdam eius voluptates odio pariatur maiores ipsa saepe tempore autem facilis voluptatum dignissimos suscipit architecto iste! Enim adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ipsum est rerum quis consequatur nostrum possimus cupiditate dolor aspernatur modi numquam dolore culpa sunt iste ea voluptatibus doloremque accusamus reiciendis!.
    </p>
</div>



div{
    width:250px;
    height: 250px;
    background: yellow;
    margin: 85px 15px;
}

.hi1{background: tomato;}
.hi2{background: royalblue;}
.p{  
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;}

Answer 1

white-space：nowrap阻止它进入下一行。事实上，这正是它打算做的事情。

http://www.w3schools.com/cssref/pr_text_white-space.asp

编辑：如果要使文本不溢出，请考虑添加该属性的位置。您希望容器不会溢出，而不是文本。因此，将overflow：hidden或text-overflow：省略号添加到div中，而不是添加到p标记。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

文字包装半工作，需要改进

1 个答案: