在旋转文本周围环绕文本时出现问题 [英] issues when wrapping text around rotated text

问题描述

我正在尝试在我正在开发的业余网站上创建信息图形/数据面板.我希望显示垂直旋转的统计总数之一的文本，支持文本环绕它，但是我很难正确对齐.

我可以在以下位置显示我的工作进度页面，而不是粘贴代码:

http://www.footy-results.co.uk/

我无法开始工作的信息图形面板是148 个团队"……希望这个问题对 css 向导来说是显而易见的！

任何提示或技巧将不胜感激，任何可以帮助我解决此问题的人都将在我启动时在网站上记名！

解决方案

我有一个解决方案，但不是 100% 干净.在我看来，它只是不允许使用负边距，但我找不到其他解决方案.此外，您必须定义元素的高度和宽度...

您必须将旋转后的 元素放入另一个

.然后你可以正确定位

并且文本在它周围浮动.代码如下:

HTML:

<span class="infoPanelVertical"><div class="spanwrapper"><span class="infoNumberVertical">148 TEAMS</span>
在这输入文字...</span>

CSS:

.spanwrapper {向左飘浮;高度:157px；位置:相对；宽度:48px；}.infoNumberVertical {背景色:#F5F5F5；边框:1px 虚线 #DDDDDD；颜色:#1A3C7B；向左飘浮;字体大小:32px；字体粗细:粗体；左边距:-56px；边距顶部:60px；变换:旋转(-90度)；宽度:150px；}

问题是您必须为包装 <div> 或其中的跨度提供高度和宽度，否则文本不知道应该在哪里浮动.如果您没有定义任何宽度或高度，则文本只是环绕旋转的文本，这是一个大矩形.如果您使用 CMS 或想动态填充内容，这是一个糟糕的解决方案.但是您也可以通过 js 定义宽度和高度，但我认为这有点笨拙的解决方案.

I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.

Instead of pasting code I can show my work in progress page at:

http://www.footy-results.co.uk/

The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!

Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!

解决方案

I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...

You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:

HTML:

<div class="infoPanel">
    <span class="infoPanelVertical">
         <div class="spanwrapper">
             <span class="infoNumberVertical">148 TEAMS</span>
         </div> your text here...
    </span>
</div> 

CSS:

.spanwrapper {
    float: left;
    height: 157px;
    position: relative;
    width: 48px;
}

.infoNumberVertical {
    background-color: #F5F5F5;
    border: 1px dotted #DDDDDD;
    color: #1A3C7B;
    float: left;
    font-size: 32px;
    font-weight: bold;
    margin-left: -56px;
    margin-top: 60px;
    transform: rotate(-90deg);
    width: 150px;
}

The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle. I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.

这篇关于在旋转文本周围环绕文本时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！