CSS - 你如何让文本在div的两端溢出？

这是这个CSS制作：

.marker-cluster-div { 
width: 30px; 
height: 30px; 
font-size: 12px; 
border-radius: 50%; 
color: black; 
font-weight: bold; 
text-align: center; 
vertical-align: middle; 
line-height: 30px; 
}

我如何在div流动文本出来的两端div平等吗？我希望文本稍微向div的左侧开始，如果不适合，则稍微向右侧结束。如果文字合适，请将其放在中间。

如何在CSS中执行此操作？

来源

2014-10-27 ohyeah

你不会......真的。文本应该包含在div中...这就是div的用途。我会找到另一种方式。但是，我们需要查看HTML和CSS才能正确协助。 – 2014-10-27 10:43:56

我建议你不要在CSS“float”属性的背景下使用“float”这个词，因为这会让人感到困惑。在这种情况下更好的词是'溢出'。此外，我相信你的设计问题可以解决，而不会让文本实际上溢出你的div容器。 – Alternatex 2014-10-27 10:57:03

谢谢，标题编辑。 – ohyeah 2014-10-27 10:59:46

正如我在我的评论中提到的，你不应该有文字实际上流出'含'div。

我会建议这样的事情。

JSfiddle Demo

HTML

<div class="circle"> 
    <div class="text"> 
     <p>Lorem ipsum dolor sit.</p> 
    </div> 
</div>

CSS

.circle { 
    margin: 50px; 
    width:50px; 
    height:50px; 
    border-radius:50%; 
    position: relative; 
    background: red; 
} 

.circle .text { 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:auto; 
    white-space:nowrap; 
}

or..even更好 - JSfiddle Demo (Pseudo-element)

HTML

<div class="circle"> 
    <p>Lorem ipsum dolor sit.</p> 
</div>

CSS

.circle { 
    position: relative; 
    display: inline-block; 
} 

.circle:after { 
    content:""; 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:auto; 
    width:50px; 
    height:50px; 
    border-radius:50%; 
    background: red; 
    z-index:-1; 
}

来源

2014-10-27 11:03:09

谢谢，这就是我需要的！ – ohyeah 2014-10-27 11:05:13

试试这个：

你的CSS

div.content 
 
{ 
 
margin-left:300px; /*just for making div visible for you, you can delete that in your code*/ 
 
width: 100px; 
 
height: 100px; 
 
font-size: 12px; 
 
border-radius: 50%; 
 
background-color: red; 
 
font-weight: bold; 
 
text-align:center; 
 
} 
 

 
p.centerText 
 
{ 
 
    float:left; 
 
    width:400px; /* you must know your text's width for this code to work */ 
 
    margin-top:50px; /* div.content's height/2 */ 
 
    background-color:yellow; 
 
    margin-left:-150px /* (p.centerText's width/2)-(div.content's width/2) */ 
 
} 
 

 
Your HTML

<html> 
 
<body> 
 
    <div class="content">  
 
    <p class="centerText"> 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum   
 
    </p> 
 
    </div> 
 
</body> 
 
</html>

来源

2014-10-27 11:12:06

http://codepen.io/straight-shoota/pen/ophHF?editors=110

CSS

.marker-cluster-div { 
    width: 45px; 
    margin-left: -7px; 
    color: black; 
    font-weight: bold; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 30px; 
    text-align: center; 
    position: relative; 
    font-size: 12px; 
} 
.marker-cluster-div::before { 
    content: ""; 
    left: 7px; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    background-color: red; 
}

另一解决方案是提供的红点作为背景图像。

来源

2014-10-27 11:17:20 jomue

这样如何：

#circle { 
 
    float: left; 
 
    height: 120px; 
 
    line-height: 120px; 
 
    white-space: nowrap; 
 
    background: url('https://www.dropbox.com/s/g5sit7vueru0cd1/circle.svg?raw=1') no-repeat center center; 
 
}

<div id="circle"> 
 
    Lorem ipsum dolor sit. 
 
</div>

又如具有多个元素：

.circle { 
 
    float: left; 
 
    clear: both; 
 
    height: 120px; 
 
    line-height: 120px; 
 
    white-space: nowrap; 
 
    background: url('https://www.dropbox.com/s/g5sit7vueru0cd1/circle.svg?raw=1') no-repeat center center; 
 
}

<div class="circle"> 
 
    Lorem ipsum dolor sit. 
 
</div> 
 

 
<div class="circle"> 
 
    Lorem ipsum. 
 
</div> 
 

 
<div class="circle"> 
 
    Lorem ipsum dolor sit amet, consectetur. 
 
</div>

来源

2014-10-27 11:25:33 Joonas

CSS - 你如何让文本在div的两端溢出？

回答

相关问题